什么是CSS?
CSS指层叠样式表(cascading style sheets),也称CSS样式表或级联样式表,跟HTML一样,也是一种标记语言。由于HTML的局限性,网页的内容只是单纯的填充,没有经过合理排布,样式丑陋,而用CSS可以解决这个问题,用于美化网页,包括设置页面的文本内容(字体、大小、对齐方式等)、图片外形(宽高、边框样式、边距等)、版面布局和外观显示样式。
CSS规则
基本语法:
<style>
选择器 {
属性: 属性值;
}
</style>
选择器是用于指定CSS样式的HTML标签,花括号是对该对象设置的具体样式。
-
代码风格
- 样式一般用展开格式书写,一行一个属性,看起来更直观
- 一般用小写字母
- 冒号、选择器后保留空格
CSS选择器
1.基础选择器(单个选择器)
(1)标签选择器——HTML标签名作为选择器
这种方式会把某一类标签名全部选择出来,能快速为页面同类型的标签统一设置样式,但缺点是不能设计差异化样式。
(2)类选择器——单独选择一个或几个标签
<style>
.类名 {
属性1: 属性值;
属性2: 属性值;
··· ···
}
</style>
<body>中哪个标签想使用这个样式就在自己标签后加一个属性class=“类名”,类名自定义,但最好有意义,便于后期维护修改,增加代码可读性。类名的命名规则:长名称或词组可以使用中横线来命名,不要用纯数字、中文命名。
- 注意:一个标签可以有多个类名,选择任意一个类名都可以选中这个标签;一个标签也有多个类名,多个类名之间用空格隔开。 实际开发中,一般将共同的样式写在一个类里,需要的标签都可以调用,再调用自己独有的类,节省代码,修改方便。
(3)id选择器
<style>
#id名 {
属性1: 属性值;
属性2: 属性值;
··· ···
}
</style>
id选择器与类选择器最大的区别在于使用次数上:类选择器相当于一个人可以有多个名字,同一个名字也可以被多个人使用;id选择器相当于人的身份证号码,是唯一的,不可以重复使用。id选择器一般用于页面上唯一的元素上,经常和js搭配使用。
(4)通配符选择器
通配符选择器用于将页面中所用的标签进行统一修改。
<style>
* {
属性1: 属性值;
属性2: 属性值;
··· ···
}
</style>
最常用于清除所有元素的内外边距,因为在不同浏览器中,默认的各种边距一般不同,为了避免在不同浏览器上网页出现显示误差,一般在设置样式前都要先将所有边距全部清除一遍,由程序员重新统一设置。
<style>
* {
margin: 0;
padding: 0;
}
</style>
2.复合选择器
复合选择器是由两个及以上的基础选择器通过不同方式组合而成,能够更准确高效选择目标元素(标签)。
(1)后代选择器(包含选择器)
可以选择父元素里面的子元素,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。
<style>
<--! 表示元素1里面所有的元素2,只选择了元素2 -->
元素1 元素2 {
属性1: 属性值;
属性2: 属性值;
··· ···
}
</style>
- 注意:
- 元素2可以是儿子、孙子等
- 只要是元素1的后代就行。元素1和元素2可以是任意基础选择器
(2)子(元素)选择器
与后代选择器的区别在于:只能选择某元素的最近一级子元素,即直接后代。
(3)并集选择器
用于多组标签选择选择相同的样式。最后一个选择器不需要加逗号。
<style>
元素1,
元素2 {
属性1: 属性值;
属性2: 属性值;
··· ···
}
</style>
(5)伪类选择器
用于向某些选择器添加效果,比如给链接添加特殊效果,或选择第一个,第n个元素。
- 链接伪类
伪类选择器 | 说明 |
---|---|
a:link | 选择所有未被访问的链接 |
a:visited | 选择所有已被访问的链接 |
a:hover | 选择鼠标指针位于其上的链接(最常用) |
a:active | 选择活动链接(鼠标按下未弹起的链接) |
例如下方的代码可以实现将链接a设置成天蓝色,如果将鼠标移动到链接a上,会变成红色。
<style>
a{
text-decoration: none;
color: skyblue;
}
a:hover {
color: red;
}
</style>
<body>
<a href="#">我是空链接</a>
</body>
-
注意事项:
- 为了确保链接伪类选择器能够生效,要按照LVHA顺序声明。
- 链接a在浏览器中具有默认样式,直接对body进行整体修改是不会,这个涉及到优先级的问题,以后会有说明。改变链接a,需要给链接单独指定样式。
- focus伪类选择器
用于获取焦点(光标)的表单元素,一般情况下<input>类表单元素才能获取。
例如下方代码可以实现当鼠标选中输入框时,输入框的背景颜色会变成红色:
<style>
input:focus {
background-color: red;
}
</style>
<body>
<input type="text">
</body>