首页 > 代码库 > HTML5 -入门 (----------------------css样式(1)---------------------—)
HTML5 -入门 (----------------------css样式(1)---------------------—)
---恢复内容开始---
一css基础入门与css选择器
CSS英文全拼:cascading style sheet 层叠样式表。
在html中使用:要在head中写style标签,所有样式放在style标签中。
<style>
color: red; 设置文本颜色
font-size: 30px; 设置文本大小
设置背景颜色
background-color: blue;
font-weight: bold; 设置文本粗体
font-style: italic; 设置文本斜体
注意:凡是font开头的想要设置默认的样式则使用normal
text-decoration: underline; 设置文本下滑线,如果去除下滑线则用none这个属性
</style>
1标签选择器
eg:
<h1></h1>
h1{...}
代码中h1、p、li、span都是标签选择器。只要在当前页面中出现的h1、p、li、span标签都会被修改样式。
2 id选择器
id选择器,它选择的标签更专一,就是唯一的。Id不可以重复,在同一页面中只允许有一个id名字。
Id的命名规则:只能有数字、字母、下划线组成。只能以字母开头,并且id名字不可以和标签重名。
eg:
<div id="div"></div>
#div{...}
3 类选择器
eg:
<p class="hong ">我们</p>
.hong{...}
类选择器,首先需要我们为标签设置class名字。通过class写类样式。
1、Class在页面中可以重复
2、一个class样式可以同时为多个标签提供使用
3、一个标签可以设置多个类样式
我们可以将公用的样式抽取出来,作为公共类样式使用。
4后代选择器
eg: <div class="one">
<ul>
<li></li>
</ul>
</div>
.one ul li{
color: red;
font-size: 30px;
}
上面使用的就是后代选择器,首先由名字为One的class找到后代ul然后再找到后代li。
也就是说li是ul的后代ul是one的后代!
4交集选择器
div ul li.first{
text-decoration: underline;
}
li.first它就是交集选择器,他就是在一起,没有空格也没有任何符号。
交集选择器选择方式:它既符合是li标签,又符合是.First类,取交集。
一般交集只写两个。
5并集选择器
eg:
.first,.second{
text-decoration: underline;
}
这是并集选择器,并集选择器是使用逗号分隔开。
最好不要经常使用它,应为效率不高
6通用选择器
*{} :它就是通用选择器,所有的标签都可以用它的样式
7子代选择器
div>p:使用“>”来写子代选择器,它只能选择div的子代,不能选择子代的子代
8序选择器
div ul li p:first-child 这个是选择的第一个p标签
div ul li p:last-child 这个是选择的最后一个p标签
9伪类选择器
a:hover 鼠标悬停时候会触发使用的选择器
a:link 未访问过得链接伪类选择器
a:visited 访问过得链接伪类选择器
a:active 当前选中的链接伪类选择器
---恢复内容结束---
HTML5 -入门 (----------------------css样式(1)---------------------—)