1.CSS 样式使用方法
- 内联式、嵌入式和外部式
- 内联式,写在标签中
- 嵌入式css样式,写在当前的文件中
<style>...</style>
- 外部式,写在一个单独的文件中
<link href="base.css" rel="stylesheet" type="text/css" />
<!---rel="stylesheet" type="text/css" 是固定写法不可修改--->
- 三种方法的优先级别内联式 > 嵌入式 > 外部式,越容易修改的优先级越高。嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面
2.CSS中的选择器
-
每一条css样式声明(定义)由两部分组成,形式如下:
选择器{ 样式; }
在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
-
标签选择器其实就是html代码中的标签如,html,body,h1,p等
-
类选择器
.类选器名称{css样式代码;}
类选器名称可以任意起名 -
ID选择器
ID选择器都类似于类选择符,但也有一些重要的区别:
- 1、为标签设置id=“ID名称”,而不是class=“类名称”。
- 2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。
-
类选择器和ID选择器的区别
- 不同点
- 1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次
- 2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
.stress{ color:red; } .bigsize{ font-size:25px; } <p>到了<span class="stress bigsize">三年级</span>下学期时,我们班 ...大</p>
- 不同点
-
子选择器
子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素的样式。
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。
总结:>作用于元素的第一代后代,空格作用于元素的所有后代 -
通用选择器
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:
* {color:red;}
-
伪类选择符
为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:a:hover{color:red;}
-
分组选择符号
当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,)h1,span{color:red;}
3.继承层叠和特殊性
-
继承
CSS的某些样式是具有继承性的,继承即父元素的样式不仅应用于其本身还应用于其子元素,如
color
,但border
等样式不具备继承性。 -
特殊性
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100
权值越高样式的优先级越高,哪个描述更具体就用哪个样式。
p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/
-
层叠
层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用.
-
重要性
使用
!important
来设置某些样式具有最高属性p{color:red!important;} p{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。
4.CSS格式化排版
-
字体、字号、颜色、粗体、斜体、下划线
现在网页一般喜欢设置“微软雅黑”
body{font-family:"Microsoft Yahei";font-size:12px;color:#666} a{font-weight:bold;font-style:italic} span{text-decoration:underline;}
-
设置段落缩进、行间距、中文字间距、字母间距
p{text-indent:2em;line-height:1.5em; letter-spacing:50px;word-spacing:50px;}
-
对齐
div{text-align:center}
ref:
[1] https://www.imooc.com/learn/9