文章目录
1.CSS3概述
为网页添加样式
注释 /* … */
快捷键: ctrl+shift+/
术语解释
h1{
color: blue;
background-color: aqua;
}
css规则 = 选择器 + 声明块
选择器
选择修饰元素
1.元素选择器(使用同名元素都被选中)
2.id选择器(选择对应id值的元素)
3.类选择器(用的最多)
声明(属性)块
出现在大括号内
声明块内包含多个声明(属性)
css代码书写位置
1.内部样式表：书写在head的style元素中
2.内联样式表：直接写在元素的style属性中，不用选择器
3.外部样式表[推荐]：将样式写在独立的CSS文件中，需要添加link(链接)元素调用外部文件
1).可以解决多页面样式重复问题
2).有利于浏览器缓存，提高页面响应速度
3).有利于HTML5代码与CSS3代码分离，便于阅读和维护
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style>
h1{
color: blue;
background-color: aqua;
}
p{
color: coral;
}
#no1{0
color: blueviolet;
}
.red{
color: red;
}
.size{
font-size: 50px;
}
</style>
</head>
<body>
<h1>
现在开始添加样式
</h1>
<p class="red size">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam culpa eos fugit modi quis voluptas?</p>
<p id="no1">Accusamus accusantium atque ducimus, fuga itaque minus nam odit optio porro reiciendis, repellat velit
voluptates!</p>
<p class="size">Alias aliquid, cumque cupiditate dolores expedita explicabo minus nemo, rem repellendus reprehenderit, suscipit
ut vero?</p>
<p>Accusamus, consequuntur, corporis debitis expedita iste maxime possimus quam reiciendis repudiandae, temporibus
ut voluptates. Libero?</p>
<p class="red">Ab commodi delectus illo ipsa maiores nesciunt perspiciatis sapiente sunt temporibus totam veniam vitae,
voluptatum!</p>
<p>Aliquid atque autem expedita incidunt iste, itaque laboriosam nihil nobis possimus quod ullam voluptate
voluptatem.</p>
</body>
</html>
2.常见样式声明
1.color
元素内部的文字颜色
·预设值：定义好的单词
·三原色，色值：光学三原色RGB(红绿黄)，每个颜色0-255数字表示深浅
·表示方法
1.rgb表示法：rgb(xxx,xxx,xxx)
2.hex(16进制)表示法：#xxxxxx每两位表示一种颜色16*16=256
2.background-color
元素背景的颜色
3.font-size
元素内部文字的尺寸大小
1.px：像素，绝对单位
2.em：相对单位，相当于父元素的字体大小
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素即(html),则使用基准字体大小(浏览器设置的字号)。
user agent(UA):用户代理(浏览器)
4.font-weight
文字的粗细程度，可以取值为数字或预设值，一般使用预设值normal和bold
strong默认加粗
5.font-family
文字类型，必须用户计算机存在该字体才能显示，若用户没有该字体则自动忽略该声明
所以一般声明多个字体，并在后面加上sans-serif(所有非衬线字体)防止被自动忽略
6.font-style
字体样式，通常用它设置斜体(italic)
i、em 元素默认样式为斜体；实际使用时用其作为图标(icon)
7.text-decoration
文本修饰，给文本加线等
a、del(废弃内容)、s(过期的内容)默认自带修饰
8.text-indent
首行文本缩进
9.line-height
·每行文本的高度，该值越大，每行文本的距离越大
·若设置行高为容器的高度则可以让单行文本垂直居中
·若行高设置为纯数字，则表示相对于字体的大小
10.height、weight
元素高度宽度
11.letter-space
文字间歇
12.text-align
元素内部文字的水平排列方式，默认靠左
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见样式声明</title>
<style>
/* CSS中注释的方法 */
div{
text-decoration:line-through;
}
p{
text-indent: 20px;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias aspernatur, at aut blanditiis cupiditate, deleniti fuga impedit itaque iure laborum libero neque nisi ullam voluptate. Dolore ea excepturi mollitia numquam odit, ratione tempora. A architecto consequuntur corporis modi nemo provident quo repellat rerum, similique vero! Accusantium blanditiis culpa eveniet itaque minima natus officiis quasi voluptas voluptatibus. Harum, libero, natus! Est maiores modi possimus praesentium quisquam quo veritatis vero voluptatem! Adipisci alias architecto asperiores autem dolorem et fuga, fugit id illo ipsa iure magni minus modi nobis, non optio pariatur quae, quam quos sequi similique soluta temporibus vel velit voluptatem?
</div>
<h1>
这是一个一级标题
</h1>
<i>
Lorem ipsum dolor.
</i>
<strong>
表示重要的，不能忽略的内容
</strong>
<em>
表示强调的内容
</em>
<a href="https://www.baidu.com/">百度</a>
<del>章</del>张口就来
<p>
原来价格：1.8元，原价：<s>998</s>
</p>
</body>
</html>
3.选择器
1.简单选择器
1.元素选择器(使用同名元素都被选中)
’元素{}’
2.id选择器
‘#id名{}‘ 选择对应id值的元素
3.类选择器(用的最多)
'.类名{}’
4.通配符选择器
‘*{}‘，选中所有元素
5.属性选择器
根据属性名和属性值选中元素
'[属性]{}‘，选中具有该属性的元素
6.伪类选择器
’元素:状态名{}’ ，选中某种状态下的元素
1)·link：超链接未访问时的状态
2)·visited：超链接访问过后的状态
3)·hover：鼠标悬停，徘徊下的状态
4)·active：激活状态，即鼠标按下状态
爱恨法则：love hate
7.伪元素选择器
选中元素的前面或后面
before
after
普通选择器::before/after{}
2.选择器的组合
1.并且 选择器连着写
2.后代选择器 空格
3.子元素 ‘>’，只能是子元素不能是子元素的子元素
4.相邻兄弟元素 +
5.后面出现的所有兄弟元素 ~
3.选择器的并列
多个选择器用 , 分隔
方便多个声明相同的选择器只写一个
相当于一个语法糖
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
/*元素选择器*/
/*0001*/
p{
background-color: coral;
}
/*id选择器*/
/*0100*/
#background{
background-color: blueviolet;
}
/*类选择器*/
/*0010*/
.background{
background-color: red;
}
/*通配符选择器*/
*{
background-color:rgb(200,150,200);
}
/*属性选择器*/
/*0010*/
[href]{
color: coral;
}
/*0010*/
[href="https://www.sina.com.cn/"]{
color: blue;
}
/*0010*/
[href="https://www.douyu.com/"]{
color: #008c8c;
}
/*选中鼠标某状态下的a元素*/
/*0010*/
a:link{
background-color: blueviolet;
}
/*0010*/
a:visited{
background-color: darkorange;
}
/*0010*/
a:hover{
color: aliceblue;
}
/*0010*/
a:active{
color: cornflowerblue;
}
/*伪元素选择器*/
/*0002*/
span::before{
content: "《";
color: #008c8c;
}
/*0002*/
span::after{
content: "》";
color: #008c8c;
}
/*选择器组合*/
/*并且*/
/*0010*/
.line{
line-height: 2;
}
/*0020*/
.line.text{
text-indent: 2em;
}
/*后代选择器*/
/*0002*/
div li{
color: #008c8c;
}
/*子元素*/
/*0003*/
div>ul>li{
background-color: cornflowerblue;
}
/*相邻兄弟元素*/
/*0010*/
.corlor{
color:#008c8c;
}
/*0011*/
.corlor+li{
color: red;
}
/*后面所有兄弟元素*/
/*001n*/
.corlor+li~li{
color: cornflowerblue;
}
/*选择器的并列*/
/*0012*/
.corlor,div li{
color: #008c8c;
}
</style>
</head>
<body>
<!--元素选择器-->
<h1><span>四世同堂</span></h1>
<p class="line text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, autem?</p>
<!--此时text只能在组合中才能被使用，单纯无法被使用-->
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, quaerat.</p>
<p class="line">Accusamus alibas aperiam consectetur culpa dolorem, minima nam? Est, numquam!</p>
<h1 id="background">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, quas.</h1>
<h1 class="background">Ab corporis incidunt inventore magnam nemo non quaerat saepe totam.</h1>
<p>Esse est ipsa ipsam laudantium maxime molestiae, nam nostrum velit.</p>
<p>Consequatur eos, esse labore necessitatibus nobis porro sapiente similique sit.</p>
<a href="https://www.baidu.com/">百度</a>
<a href="https://www.sina.com.cn/">新浪</a>
<a href="https://www.douyu.com/">斗鱼</a>
<div>
<ul>
<li>Lorem.</li>
<li>Ex?</li>
<li>Enim?</li>
<li>Perspiciatis.</li>
<li>Reprehenderit.</li>
<li>Blanditiis?</li>
</ul>
</div>
<ul>
<li class="corlor">Lorem.</li>
<li>Vero!</li>
<li>Dolores.</li>
<li>Modi?</li>
<li>Minus!</li>
<li>Consectetur?</li>
</ul>
</body>
</html>
4.层叠
声明发生冲突：同一个样式，多次应用到同一个元素
层叠(权重计算)：解决声明冲突的过程，浏览器自动处理
1.比较重要性
重要性从高到低：
- 作者样式表(开发者书写的样式)中的!important样式[建议不使用]
- 作者样式表中的普通样式
- 浏览器默认样式表中的样式
2.比较特殊性
看选择器
总体规则：选择器选中的范围越窄越特殊
具体规则：通过选择器，计算一个4位数(x x x x)[逢250进1],越大越特殊
- 千位：如果是内联样式记作1，否则为0
- 百位：选择器中所有id选择器的数量
- 十位：选择器中所有类选择器，属性选择器，伪类选择器的数量
- 个位：等于选择器中所有元素选择器，伪元素选择器的数量
3.比较源次序
代码书写靠后的胜出
应用：
1.重置样式表
书写一些作者样式，覆盖浏览器的默认样式
常见的重置样式表：normalize.css，reset.css，meyer.css
2.爱恨法则
link>visited>hover>active
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠</title>
<style>
a{
/*0001*/
color: red;
}
div ul a{
/*0003*/
color: green;
}
#mydiv #myul a{
/*0201*/
color: gray;
}
#mydiv #myul .mylink{
/*0210*/
color: #008c8c;
}
#mydiv #myul a:link{
/*0211*/
color: chocolate;
}
</style>
</head>
<body>
<div id="mydiv">
<ul id="myul">
<li id="myli">
<a href="https://163.com" class="mylink">
举个例子
</a>
</li>
</ul>
</div>
</body>
</html>
5.继承
子元素会继承父元素的某些css属性
通常与文字相关的内容都会被继承
属性值为inherit表示强制继承
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承</title>
<style>
.container{
color: #008c8c;
font-size:2em;
line-height: 2.5;
background-color: lightblue;
}
body{
font-family: Arial,Helvetica,sans-serif;
}
</style>
</head>
<body class="container">
<div>
<ul>
<li style="background-color: cornflowerblue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consequatur, cumque error placeat
unde ut?
</li>
<li>Adipisci facilis modi nisi nulla officiis perferendis perspiciatis ullam! Aliquid culpa magni porro
quasi reprehenderit?
</li>
<li>Accusamus adipisci aspernatur aut, blanditiis distinctio excepturi iure necessitatibus, non porro
quas quos sapiente, sequi.
</li>
<li>Accusantium animi cum, eum incidunt itaque natus perferendis, possimus, reiciendis temporibus ullam
vel voluptatem voluptatibus?
</li>
<li>Dicta dolores, eius facere mollitia officia optio quae quia quibusdam repudiandae rerum tempora
totam veritatis.
</li>
<li>A adipisci animi, beatae cum fuga illum magnam modi molestiae numquam officia quidem velit
voluptate?
</li>
</ul>
</div>
</body>
</html>