-
初识CSS
- 定义:层叠样式表,也叫级联样式表,简称样式表
- 作用:给元素添加样式
一、样式表分类:
内部样式表、外部样式表、行内样式
1. 内 部 样 式 表 \color{burlywood}{1.内部样式表} 1.内部样式表
- 在head标签内部写style标签,然后通过css的语法,"属性名:属性值;"的形式为元素添加样式。
选择器 {
属性名:属性值;
属性名:属性值;
... ...
}
blackground-color : 背景颜色
color : 字体颜色
width : 宽度
height : 高度
- 所有块级元素,以及行内元素中的img与input可以设置宽和高
2. 外 部 样 式 表 \color{burlywood}{2.外部样式表} 2.外部样式表
将元素样式的保存到一个独立的css文件中(注意:在css文件的第一行要添加上@charset “utf-8”),然后在html页面的head的标签中通过link标签引入外部样式表
<link rel = "stylesheet" href = "css文件地址">
stylesheet 代表外部样式表
css文件地址可以为绝对路径也可以为相对路径
- 外部样式表实现了标签与样式分离,在开发中比较常用
2. 行 内 样 式 \color{burlywood}{2.行内样式} 2.行内样式
- 通过为标签添加style属性,来为元素添加样式
<div style = "background-color:burlywood;width:200px;height:200px">
balabala
</div>
- 这里以div标签为例,对于style的多个属性值之间用分号隔开,这个元素样式只会应用到当前的标签中,对于其他的div标签不会产生影响。
- 因为行内样式没有实现标签与样式分离,所以一般不推荐使用。
二、选择器专题:
选择器的类型:元素选择器、id选择器、类选择器
通配符选择器、子代选择器、后代选择器、群组选择器、伪类选择器
1. 元 素 选 择 器 \color{chocolate}{1.元素选择器} 1.元素选择器
应用:为某一类元素添加样式
p { 样式设置 }
body {样式设置}
div {样式设置}
2. i d 选 择 器 \color{chocolate}{2.id 选择器} 2.id选择器
应用:通过#和id名为页面中的大版块添加样式(不常用)
<div id = "blink"> 这是一个测试 </div>
/*写在style标签中的部分如下:*/
#blink{样式设置}
- id选择器使用时一般是应用于某些大的版块,不会应用于小版块
- id与类名的命名规则:以小写字母开头,包含字母、数字、- 、_ 。
- id的命名具有唯一性,不能出现重复
3. 类 选 择 器 \color{chocolate}{3.类选择器} 3.类选择器
应用:通过.类名,为元素设置样式(常用)
<div class = "类名一 类名二 类名三">
/*写在style标签中的部分如下:*/
.类名{元素样式}
- 每一个元素都可以设置类名,类名可以重复
- 对于同一个元素可以设置多个类名,多个类名之间用空格隔开
- 在style标签中一般通过.类名来调用,也可以通过标签名.类名调用【不同之处会影响选择器的权值】
4. 通 配 符 选 择 器 \color{chocolate}{4.通配符选择器} 4.通配符选择器
应用:为页面中所有元素去掉边距
/*写在style标签中的部分如下:*/
*{
margin : 0;
dopping : 0 ;
}
- margin 代表内边距、dopping 代表外边距
- 这种将边距初始化为0的操作比较常用
5. 子 代 选 择 器 \color{chocolate}{5.子代选择器} 5.子代选择器
应用:使用>作为连接符,前后为父子关系,可以统一的更改指定父元素中的所有子元素的样式
<div class = "cup">
<ul class = "milk">
<li>原味奶茶</li>
<li>珍珠奶茶</li>
<li>香芋奶茶</li>
<li>红豆奶茶</li>
</ul>
</div>
/*写在style标签中的部分如下:*/
<style>
.milk > li{
width:200px;
height:200px;
background-color: cyan;
color:blueviolet;
}
</style>
当多个被包含的元素相同时,为他们定制样式如果都要起相同的类名很不方便。就可以选择子代选择器,为他们的父类起一个类名,通过包含标识符 “>” 子代标签,进而代替为只为其父标签起类名。
- 可以写多级父类的类名,也可以直接用子类的直接父类即可。
例如:.cup.milk > li 可以直接写成 .milk > li
- 使用>作为连接符,前后为父子关系,可以统一的更改指定父元素中的所有子元素的样式
6. 后 代 选 择 器 \color{chocolate}{6.后代选择器} 6.后代选择器
应用:也是为子代元素添加样式,前后满足祖先 后代即可,中间用空格分开
<div class = "cup">
<ul class = "milk">
<li>原味奶茶</li>
<li>珍珠奶茶</li>
<li>香芋奶茶</li>
<li>红豆奶茶</li>
</ul>
</div>
/*写在style标签中的部分如下:*/
<style>
.cup li{
属性名:属性值;
属性名:属性值;
... ...
}
</style>
- 但是需要注意:这种操作会使cup中包含所有li元素都设置相同的样式;如果要为某些li元素设置单独的样式,则不推荐使用这种选择器,应该通过单独起类名的方式类完成。
7. 群 组 选 择 器 \color{chocolate}{7.群组选择器} 7.群组选择器
应用:为多个元素样式相同的元素一起添加样式,彼此之间用逗号分开
<style>
.box, .para, #wrap{
样式设置;
}
</style>
- 需要注意:对于类名选择器,在style标签中前面用".";如果是id选择器,要使用"#"
8. 伪 类 选 择 器 \color{chocolate}{8.伪类选择器} 8.伪类选择器
应用:设置一些特定的元素样式
hover 鼠标移入效果
active 为鼠标按下瞬间效果
visited 为点击后的样式
link 为鼠标未点击前的样式
- 参考下面的伪类选择器:
.list li:hover{
cover:#123456;
}
- 更多伪类选择器参考:伪类选择器大全
9. 选 择 器 的 权 值 \color{chocolate}{9.选择器的权值} 9.选择器的权值
- 在一般情况下,使用后代选择器为某种元素设置统一的样式后,如果想为某个子元素设置单独样式(在整体样式中未定义的属性)是可以的,可以通过为这个元素设置一个单独的类名,在head标签中的style标签中进行元素样式设置。
<style>
.grandfather li{
width:200px;
height:200px;
backgroud-color:green;
}
.son{
color:red;
}
</style>
<div class = "grandfather">
<ul>
<li>son_one</li>
<li>son_two</li>
<li class = "son">son_three</li>
</ul>
</div>
- 但是如果设置的单独样式和之前已经定义过的样式发生了冲突,就可能导致后来设置的样式不起作用,这就涉及到了选择器的权值问题。
- 默认选择选择器的权值情况:
元素选择器 1
类选择器 10
id选择器 100
行内样式 1000
可手动更改权值 !important
- 选择器权值的计算方法:
- 除群组选择器之外,其它选择器都是将各个选择器权值加和即可;群组选择器要想对应的各个选择器分别计算权值。
- 当属性冲突时,会以权值大的为准;当权值相同时,以最新的定义为准
- 当手动更改某个属性的权值时,只需要在这个属性后、分号前添加!important即可,无需设置数值,系统会默认将这是属性认为是在相同属性中权值最高的