CSS基本语法
选择器{属性1：值1；属性2：值2……}
基本属性：width，height（前两个单位为px，1px就是一个像素），background-color……
内联样式和内部样式：两种方式都是使用style修饰，使用位置不同
内联样式：在需要改变样式的标签内部用style修饰
例如：<h1 style="background-color: blue; width: 10%;height: 25%" >内联演示</h1>
内部样式：在head标签内使用style调节样式
例如：
<head>
<meta charset="UTF-8">
<title>CSS基础语法</title>
<style>
div{
height: 100px;
width: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div>内部样式</div>
<!--<h1 style="background-color: blue; width: 10%;height: 25%" >内联演示</h1>-->
</body>
</html>
优缺点：
内联样式使用繁琐，每次使用都需重新写样式。
内部样式复用性强。
外部样式：将css代码单独写在一个.css文档，当页面需要样式修饰时调用此css文档
引入方式: link标签，rel，href是它的两个属性，其中rel属性指定了文档和页面的关系，href指定文档的链接地址
CSS颜色表示
- 单词表示法：直接使用每个颜色对应的单词。
- 十六进制表示法：十六进制数用0 1 2 3 4 5 6 7 8 9 a b c d e f来表示，#xxxxxx的形式来表示颜色。例如#000000为黑色，#ffffff为白色
- rgb三原色表示法：rgb(x,x,x) x的范围是0-255
CSS背景样式
background-color：调节背景颜色
background-image：插入背景图片，url为图片的路径
background-repeat：图片的平铺方式，默认是上下左右都会铺满
属性：
- repeat-x x轴平铺，repeat-y y轴平铺。
- repeat 左右都进行平铺。
- no-repeat 上下左右都不平铺。
background-position：背景的位置
- x y :number(n,n), n可以为像素或者百分比
- 也可以使用单词表示，x轴：left ，right ，center。y轴 ： top，center ， bottom
background-attachment：背景图滚轮移动方式
- scroll：背景位置按照当前元素进行偏移
- fixed：按照浏览器进行偏移
背景的视觉差效果
在块内插入背景图片，将background-attachment的属性设置为fixed，
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 1500px;height: 1000px;background-color: blue;background-image: url("hai.jpg");
background-position: left;
background-repeat: no-repeat;
background-attachment: fixed;
}
#div2{
width: 1500px;height: 1000px;background-color: blue;background-image: url("hai1.jpg");
background-position: left;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
结果：（图片不能直观感受到效果，建议自己写一遍感受一波）
CSS边框样式
broder-style：设置边框线的样式 例如，solid(实线)，dashed(虚线)，dotted(点线)等等……
border-width：设置边框的大小 ，单位为px。
border-color：设置边框的颜色
边框设置也可以单独设置某一条边框，我们只需要在设置边框样式的代码中间加上方位词即可，比如只想将上边框设置为蓝色，只需要在border-color中间加方位词：border-top-color:blue;
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#ta{
border-style: double;
border-color: blue;
border-width: 1px;
border-top-color: darkorange;
}
</style>
</head>
<body>
<table id="ta" width="500" >
<tr>
<th>ghg</th>
<th>ghg</th>
<th>hgg</th>
</tr>
<tr>
<td>gh</td>
<td>gh</td>
<td>gj</td>
</tr>
</table>
</body>
</html>
CSS文字样式
- font-family：
可以设置中文字体，也可以设置英文字体：宋体，楷体，Times New Roman……
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font</title>
<style>
#h2{
font-family:宋体 ;
}
#h3{
font-family:'Times New Roman' ;
}
</style>
</head>
<body>
<p>正常字体</p>
<p id="h2">宋体</p>
<p>normal font</p>
<p id="h3">Times New Roman</p>
</body>
</html>
结果如下：
字体设置可也一设置多个字体，避免 计算机上匹配不上对应字体。例如 font-family:‘Times New Roman’ ,宋体，楷体，黑体;当第一个字体计算机上没有的时候，会自动识别下一个字体。
- font-size：设置字体大小，系统默认的字体大小为16个像素（16px）。在设置字体时我们可以直接输入像素值也可以通过几个特定的词来改变字体大小
- font-style：字体的样式，normal（正常样式），italic（斜体），oblique也可以设置为斜体字。
代码使用：
<style>
#h{
font-style: italic;
}
</style>
<p id="h">斜体</p>
<p>正常字体</p>
- font-color：给字体设置颜色；
CSS段落样式
- text-decoration：文本修饰
下划线：underline
上划线：overline
删除线：line-through
不添加任何元素：none
（文本修饰可以同时添加多个，但需要用空格隔开） - text-transform：文本大小写，（仅针对英文文本）
小写：lowercase
大写：uppercase
只针对首字母：capitalize
代码使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text</title>
<style>
#p1{
text-decoration: underline overline;
}
#p2{
text-transform: capitalize;
}
</style>
</head>
<body>
<p id="p1">这是一个段落</p>
<p id="p2">Although political risk in banking has received much more attention in recent years, there is no review that synthesizes these incoherent studies and provides a comprehensive image of the field in the past, present, and future. This paper is a meta-synthesis literature review on political risk in banks over a 35-year period from 1985 to 2019. </p>
</body>
</html>
- CSS文本缩进
首行缩进，em是一个字的大小单位，缩进两个字即缩进2em。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
text-indent: 2em;
}
</style>
</head>
<body>
<p>本届世锦赛，切阳什姐是冲着35公里竞走金牌来的。一个星期前的20公里比赛，她拿到铜牌后并没有特别在意。但她为35公里做了充分的准备，今年4月，她在知名的竞走巡回赛斯洛伐克杜丁西站比赛中，赢得了这个世锦赛新添项目的冠军。</p>
</body>
</html>
- 文本对齐方式
text-align： 对齐方式有左对齐右对齐和居中对齐，分别表示为，left，right，center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* p{
text-indent: 2em;
}*/
p{
text-align: right;
}
</style>
</head>
<body>
<p>本届世锦赛，切阳什姐是冲着35公里竞走金牌来的。一个星期前的20公里比赛，她拿到铜牌后并没有特别在意。但她为35公里做了充分的准备，今年4月，她在知名的竞走巡回赛斯洛伐克杜丁西站比赛中，赢得了这个世锦赛新添项目的冠军。</p>
</body>
</html>
- line-height:定义段落行高(上边距到下边距的高度)
以下代码给第一端行距设置为30px，第二段话为默认的行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* p{
text-indent: 2em;
}*/
#p1{
line-height: 30px;
}
</style>
</head>
<body>
<p id="p1">本届世锦赛，切阳什姐是冲着35公里竞走金牌来的。一个星期前的20公里比赛，她拿到铜牌后并没有特别在意。但她为35公里做了充分的准备，今年4月，她在知名的竞走巡回赛斯洛伐克杜丁西站比赛中，赢得了这个世锦赛新添项目的冠军。本届世锦赛，切阳什姐是冲着35公里竞走金牌来的。一个星期前的20公里比赛，她拿到铜牌后并没有特别在意。但她为35公里做了充分的准备，今年4月，她在知名的竞走巡回
届世锦赛，切阳什姐是冲着35公里竞走金牌来的。一个星期前的20公里比赛，她拿到铜牌后并没有特别在意。但她为35公里做了充分的准备，今年4月，她在知名的竞走巡届世锦赛，切阳什姐是冲着35公里竞走金牌来的。一个星期前的20公里比赛，她拿到铜牌后并没有特别在意。但她为35公里做了充分的准备，今年4月，她在知名的竞走巡
</p>
<p>本届世锦赛，切阳什姐是冲着35公里竞走金牌来的。一个星期前的20公里比赛，她拿到铜牌后并没有特别在意。但她为35公里做了充分的准备，今年4月，她在知名的竞走巡回赛斯洛伐克杜丁西站比赛中，赢得了这个世锦赛新添项目的冠军。本届世锦赛，切阳什姐是冲着35公里竞走金牌来的。一个星期前的20公里比赛，她拿到铜牌后并没有特别在意。但她为35公里做了充分的准备，今年4月，她在知名的竞走巡回
届世锦赛，切阳什姐是冲着35公里竞走金牌来的。一个星期前的20公里比赛，她拿到铜牌后并没有特别在意。但她为35公里做了充分的准备，今年4月，她在知名的竞走巡届世锦赛，切阳什姐是冲着35公里竞走金牌来的。一个星期前的20公里比赛，她拿到铜牌后并没有特别在意。但她为35公里做了充分的准备，今年4月，她在知名的竞走巡
</p>
</body>
</html>
从图中可以看出第一端的行高明显比第二端的行高要大
文本间距
letter-spacing：字间距，设置每个字之间的距离
word-spacing：词间距，此设置只针对英文。
文本换行：
当一个英文单词足够长时后面的字段会溢出
例如：下面图片的第二行
有两种方法可以解决以上问题：
其一：work-break：break all（此种方法换行，第一行不会留有空格）
其二：break-wrap：break word（第一行会有空格，第二行才开始换行）
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;height: 200px;
border-style: solid;
/*word-break:break-all;!*第一种换行*!*/
word-wrap: break-word/*第二种换行*/
}
</style>
</head>
<body>
<div>
dasd Dasda dsadasdsadasdasdasdasdasdasdasda dasdasdsa dasdas das d sad sa das d as daw q
</div>
</body>
</html>
第一种方式换行结果
第二种方式换行结果
CSS复合样式
CSS代码的复合写法可以大大减少代码冗余，两个属性中间需要用空格隔开
background：颜色 背景图 平铺方式 大小………
border：线的类型 颜色 宽度…… (以上两个不需要关注属性设置的顺序，任意即可)
font
注意：复合样式和单一样式尽量避免混合使用，如若一定要混合使用，则应该先写复合样式后写单一样式，否则单一样式会失效。
CSS选择器
- id选择器：
当我们在style标签内使用css代码对文本进行修饰的时候，有些页面标签可能出现多次，而我们只想修饰其中的某一个，所以这时候要使用id来帮助我们精确的识别要修饰的那一部分
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font</title>
<style>
#h2{
font-family:宋体 ;
}
#h3{
font-family:'Times New Roman' ;
}
#h{
font-style: italic;
}
</style>
</head>
<body>
<p id="h">斜体</p>
<p>正常字体</p>
<p id="h2">宋体</p>
<p>normal font</p>
<p id="h3">Times New Roman</p>
</body>
</html>
代码中分别对不同段落进行不同的修饰，所以定义了三个id。
id的命名规范：
在一个页面中允许多次出现同一个id，但这违背了我们本来引入id对相同标签内容进行不同修饰的初衷，所以在一个html页面中一个id按照规范只允许出现一次，且id名必须以字母、下划线开头，不允许数字开头，否则将会报错。
- class选择器
class选择器和id选择器的使用大致相似，class选择器在css代码中是以 .class名 的形式来对页面某一部分进行修饰，例如：假设页面中某个标签设置的class名为 class=“a” ，则我们在css代码中需要以 .a{……}的形式进行选择.
class名称可以同时设置多个：
<p class="a ty num ">这是段落</p> //每个类名之间需要用空格隔开
注意：当有多个class名称时，页面样式的优先级是跟据css代码的优先级顺序决定的。
当有多个标签使用了同一个class名字时，但又想给其中某一个标签在添加别的修饰，此时我们可以通过标签名.类名的方式进行选择
举例：（例子仅仅是为了演示代码如何使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.modify{
width: 200px;height: 200px; background-color: blueviolet;
font-style: italic;
}
p.modify{
width: 100px;height: 100px;
font-style: normal; background-color: darkkhaki;
}
</style>
</head>
<body>
<div class="modify">块1</div>
<div class="modify"> 块2</div>
<p class="modify">段落</p>
</body>
</html>
- 标签选择器
直接使用标签名加{}的方式： div{ ……} - 群组选择器
形如：div , p , #id名 {……} 的形式，标签与id名与class之间都需要用逗号隔开 - 通配选择器
会将所有的标签都加上样式的修饰效果，一般不用他来修饰文本，用他来消除所有标签的默认效果时可以使用 - 层次选择器
后代关系 M N {……}当一个标签有子标签时， 修饰其子标签的时候需要先 将其上一层标签些在要修饰的子标签之前，并用空格隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li{
background-color: red;
width: 100px;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>
当我们只想给第二层标签添加样式时，其第二层标签里面还嵌套有其他标签，此时我们使用另一种方法：
上一层标签的id名 >下一层标签{ ……} ： #id > N{……}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul>li{
border-style: solid;
width: 100px;
}
</style>
</head>
<body>
<ul id="h">
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>
此时只是第二层标签被添加了样式
兄弟关系：
M~N{ }表示在 M标签后的所有N都被修饰
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div~p{
background-color: red;
}
</style>
</head>
<body>
<p>段落、一</p>
<div >块1</div>
<div > 块2</div>
<p >段落</p>
<h1>标题一</h1>
<p>段落二</p>
<h1>标题二</h1>
</body>
</html>
跟据结果结合代码很容易看出如何使用
相邻关系：
M+N{……}
修饰与M相邻的N标签，并且必须是下面相邻
-
属性选择器
M[ attr ]{ }
= 完全匹配
*= 部分匹配
^=起始值匹配
$= 结束值匹配
也可以进行复合使用，即：M[attr1][attr2]{……} -
伪类选择器
M: … {……}
link 访问前的样式
visited 访问后的样式（以上两种只能给a标签使用）
hover 鼠标移入时的样式
active 鼠标点击时的样式（后面两种可以给的所有标签使用）
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{
background-color: orange;
}
a:visited{
background-color: red;
}
div{
background-color: blue;
width: 200px;height: 200px;
}
div:hover{
background-color: yellow;
}
</style>
</head>
<body>
<a href="#">请点击此处链接</a>
<div></div>
</body>
</html>
初始样式：
点击后的样式
after伪类选择器;
:after 在文本后添加新文本
：before 在文本前面添加新文本（两者也可以设置颜色属性 ，content 和color 属性）
checked 、disable 以下针对表单
focus
CSS样式继承
文字相关的修饰是可以被继承的，而布局相关的修饰不可以被继承（默认情况下）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;height: 200px;
border: solid 12px blue;
background-color: red;
font-style: italic;
}
</style>
</head>
<body>
<div>
<p>段落这是</p>
</div>
</body>
</html>
从图片中容易看出，css代码中前三段布局修饰没有对p标签内容造成影响，后面的文字修饰对p标签有修饰作用。这是简单的继承，但当我们在style标签中加入p{border:inherit}时 p标签也能继承border的设置
CSS优先级
相同样式的设置，代码靠后的优先级高
内部样式和外部样式的优先级相同，如果设置了相同的属性，那么后引入的样式优先级更高（按照使用顺序，后用的优先级高）
单一样式优先级：id>class>tag>*>继承
层次的优先级
* 权重比较（将标签的权值加在一起然后比较，大的优先级高）
* 约分比较（将相同属性值的约分掉，比如 都有id或者class等，约掉之后继续比较，大的优先级高）
扫一扫
454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
