3.1css根据声明位置不同有三种使用方式:内联、外联、外部
<元素名 style="属性名:属性值">
多个:
<元素名 style=“属性名1:属性值 ; 属性名2:属性值2;……属性名n:属性值n"
例如为某标题设置样式
<h1 style="color:blue ; backgroud-color:yellow">标题<h1>
3.1.2内联样式表
位于<head>内部,例如
<style>
选择器{color:red}
</style>
3.1.3外部样式表
后缀名.css
<link rel="stylesheet" href="样式文件的路径">
除了不用写<style></style>外和内联一样
3.2css选择器
元素选择器、ID选择器、类选择器、属性选择器
3.2.1元素选择器
例p{backgroud:gray}
3.2.2ID选择器
在声明时要在id名前加上#。
id名{属性名1:属性值1;属性名2:属性值2……;}
test{color:red}
<p if="test" >这是一个段落</p>
3.2.3类选择器
类选择器可以将不同的元素定义为共同的样式。类选择器在声明时在前面加“ . "。
为了和指定的元素关联使用,需要自定义一个class名称。
.class名{属性名1:属性值1;属性名2:属性值2;……}
例如:
.red{color:red}
使用:
<h1 class = "red">这是标题,字体是红色</h1>
<p class="red">这是段落,字体是红色</p>
一个段落元素也可以用多个类样式
3.2.4属性选择器
属性选择器允许基于元素所拥有的属性进行匹配。
元素名 [元素属性] { 属性名1:属性值1;属性名2:属性值2……;}
例如,只对带有href属性的超链接元素<a>设置CSS样式
a [ href] ={ color:red; }表示将所有带有href 属性的超链接元素设置字体颜色为红色。
也可以根据具体的属性值进行CSS样式设置:
a [ href ]="http://www.baidu.com"]{
color:red;
}将属性值为百度的超链接设置为红色样式
如果不确定属性值的完整内容,可以用 [ attribute~=value关键词 ] 查找
a[ href = "baidu" ] {
color:red }
CSS注释: /*********************************/快捷键:"Ctrl"+"/"
网友评论