CSS语法
CSS规则是由两个主要的部分构成，选择器，以及一条或多条声明
CSS的四种引入方式
1，行内式：行内式是在标记的style属性中设定CSS样式，不推荐使用
例如：<p style='backgroud-color:rebeccapurple'>hello yuan</p>
2,嵌入式：嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中，如下：
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
p{
/*background-color：背景色*/
}
</style>
</head>
<body>
<p>CSS的四种引种样式</p>
</body
3,链接式：将一个.CSS文件引入到HTML文件中
<link href='mystyle.css' rel='stylesheet' type='text/css'/>
建一个html文件，在html的head标签中嵌套<link herf='放CSS文件名.css' rel='默认stylesheet' type=‘什么形式的文件(text/css)’>
用于连接css文件，在html文件的body标签嵌套要实现的标签。如下：
<body>
<p>CSS的四种引种样式</p>
</body
建一个css文件，在css文件中写标签名加花括号，在括号中写要修饰的样式。
4,导入式：将独立的.css文件引入html文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用语法如下：
html文件中：
<head>
<style>
@import "mystyle.css";
</style>
</head>
<body>
<p>CSS的四种引种样式</p>
</body>
css文件中：
p{
background-color: aqua;
}
说明：在head标签中嵌套一个style标签，用style标签包住@import:'css文件名';
在body标签中嵌套新标签，最后在css文件中将body标签中嵌套的新标签名加括号，在括号中写上修饰样式。
CSS选择器
基本选择器：标签选择器(body标签中嵌套的标签名加花括号，花括号中加修饰)，
id选择器(#body标签中嵌套的标签名加花括号，在花括号中写入修饰)，
class选择器(.<点>body标签中新标签的标签名加花括号，在花括号中写入修饰)，
通配选择器(*)(*后跟花括号，在花括号中写入修饰)
组合选择器
用链接式<link href='mystyle.css' rel='stylesheet' type='text/css'>将html文件和css文件链接起来
1，E,F多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔div，p{color：red}
在html文件body标签中嵌套至少两个新标签，然后在css文件中将两个新标签的标签名用逗号隔开加花括号，在花括号中写入修饰。
如：
html文件中
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
<body>
<div>我勒个去</div>
<p>CSS的四种引种样式</p>
..........
</body>
css文件中
div,p,....{
background-color: aqua;
}
2，E，F是后代选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
在html中的body标签中嵌套一个div标签，再在这个div标签中嵌套一个a标签和一个div标签，再在div标签嵌套的div标签中嵌套一个a标签，
这样不管嵌套多少层都是doby下的div标签的后代标签。
在css这个文件中，将body标签下的div标签名和要被修饰嵌套标签的标签名以空格分隔加花括号，在花括号中写上修改即可，这样div下的
不管有多少个子标签，只要要修饰的标签名相同都会被修饰
例如：
html文件中
<body>
<div> #只要造div里面不管嵌套几层都是div的后代标签
<a href="">我是div里面的a标签</a>
<div>
<a href="">我是div的孙子标签</a>
</div>
</div>
<a href="">我是div外面的a标签</a>
</body>
css文件中
div a{
font-weight: bold;
}
3，儿子选择器<E>F>：子元素选择器，匹配所有的E元素的子元素F
在html中的body标签中嵌套一个父标签div，在父标签中嵌套的标签就是儿子选择器。
css文件中将父标签名和子标签名用大于号连接(父标签一定在子标签前面)后跟花括号，在花括号中加入修饰即可修饰儿子标签
在html文件中
<body>
<div>
<a href="">我是div里面的a标签</a>
<p> ****注意了：这里的标签不能再是div，要不然里面的标签也会被修饰，因为它是以父标签找子标签，不管后代标签
<a href="">我是div的孙子标签</a>
</p>
</div>
<a href="">我是div外面的a标签</a>
</body>
4，毗邻选择器(E+F)：匹配所有紧随E元素之后的同级元素F
在html中的body标签下嵌套form标签，在form标签中嵌套label和input两个同级标签都会被修饰
(注：body标签中的标签中嵌套的标签(对于label和input来说子标签)不会被修饰)
在css文件中将body下面form标签的第一层嵌套的标签名用+号连接加花括号，在花括号中写入修饰即可修饰body下的所有同级标签
例如：
在html中
<body>
<form action="">
<label for="i1">姓名</label>
<input type="text" id="i1"> #修饰input输入框
<label for="i2">邮箱</label>
<input type="email" id="i2">
<label for="i3">密码</label>
<input type="password" id="i3">
</form>
</body>
在css文件中
label+input{
border: 1px solid red;
}
弟弟选择器(p标签不能嵌块级标签div，ul)E~F：普通兄弟选择器，以破折号分隔
html文件中
在body标签中嵌套多个标签，规定一个标签在这个标签下面的是弟弟标签，上面或里面的标签均不是不会被修饰
css文件中
将规定的那个标签名和它以下的标签名用破折号连接后跟花括号，在花括号里面写入样式修饰。
如下：
在html文件中
<body>
<ul> #不会被修饰
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<p>这是一个p标签</p> #以p标签为哥哥标签，p以下为兄弟标签
<ul> #被修饰
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
在css文件中
p~ul{
color: red;
}
****注意：关于标签嵌套一般块级元素可以包含内联元素或某些块级元素，
内联元素不能包含块级元素，只能包含其他的内联元素，p标签不能包含块级元素
属性选择器
常用
1,只指定属性的元素
在html文件中
<body>
<p title='不带属性值，只有属性'>我是p标签</p>
<p class=''>我也是p标签</p>
</body>
在css文件中
p[title]{ #在这里指定的是属性为title的标签，所以只修饰<p title>我是p标签</p>标签
background-color: red;
}
这样就可以实现修饰效果
2，指定属性和属性值的元素
在html文件中
<body>
<p class="ha">我也是p标签</p>
<p class="he">我是属性值为he的标签</p>
</body>
在css文件中
p[class='he']{ #这里指定了属性和属性值，所以只修饰<p class="he">我是属性值为he的标签</p>
color: red;
}
不常用
~只要属性值中包含指定值的每一个标签都修饰
在html文件中
<body>
<div class="c2">div1</div> 修饰
<div class="c3">div2</div> 不修饰
<div class="c2 我去">div3</div> 修饰
</body>
在css文件中
div[class~='c2']{ #这里修饰属性值只要包含c2的每一个标签
background-color: red;
}
^修饰指定属性值以什么字母(可指定一个或多个)开头的标签
如下：
html文件中
<body>
<div class="egon">egon</div> 以e开头修饰
<div class="calss">calss</div> 不修饰
<div class="email">email</div> 以e开头修饰
</body>
css文件中
div[class^='e']{
background-color: darkred;
}
$修饰属性值以什么字母结尾的标签
在html文件中
<body>
<div class="sex">傻逼egon</div> 修饰
<div class="see">傻逼egon</div>
<div class="howx">傻逼egon</div> 修饰
</body>
css文件中
div[class$='x']{ 指定以x结尾
background-color: darkred;
}
*修饰指定属性值包含在属性中(不包含的不会被修饰)的标签
在html文件中
<body>
<div class="sb egon">egon1</div> 修饰
<div class="egon sb">egon2</div> 修饰
<div class="yuanhao">yuan</div> 不修饰
</body>
在css文件中
div[class*='sb']{ 指定属性值为sb，所以在属性中只要出现sb就被修饰
background-color: darkred;
}
伪类选择器
anchor伪类：专用于控制连接的显示
1,hover：当鼠标悬浮到链接上时添加特殊样式，注意hover选择器可用于所有元素。
在html文件中
<body>
<a href="">我是a标签</a>
<div>我是div标签</div>
<p>我是p标签</p>
......
</body>
在css文件中
a:hover{color: #FF00FF}
div:hover{color: darkred}
p:hover{color: #FF00FF}
*以下三个只有a标签特有
2，link：当超链接a标签没有被点击的时候有样式
在html文件中
<a href="">这里是超链接标签</a>
在css文件中
a:link{color: #FF0000}
3,visited：在点击之前有一个颜色样式，当鼠标点击过后原a链接就发生样式变化
html文件中
<body>
<a href="https://www.baidu.com">猛击</a>
</body>
css文件中
a:visited{color: #FF0000}
4，active：选定的链接
5，focus：当鼠标点击输入框时，输入框发生样式改变，这就是focus作用。
在html文件中
<body>
用户名：<input type="text">
</body>
在css文件中
input:focus{color: mediumvioletred} #改变要输入内容的样式
input:focus{border: 2px solid red} #设定改变边框的样式
6，伪类选择器
before(在标签元素之前插入内容)，after(在标签元素之后插入内容)
after
在html文件中
<body>
<div class="c3">div</div> 在div后添加一个有样式的hello
</body>
在css文件中
.c3:after{
content:'hello';color: red;
}
before
在html文件中
<body>
<div class="c2">div5</div> #在div5前面添加样式hello
</body>
在css文件中
.c2:before{
content:'hello';color: red;
}
选择器的优先级
CSS继承
继承是CSS的一个主要特征，依赖祖先后代的关系。
1，继承优先级最低(我如果没有设定样式就默认用祖先的样式)
继承与字体样式相关的内容
例如：
在html标签中
<body>
<div class="c1">爷爷
<div>儿子
<p class="c2">孙子</p>
</div>
</div>
</body>
在css标签中
.c1{
color: chartreuse;
}
p{
color: red;
}
样式优先级
id(#) 100 ，class(.) 10，标签(标签名) 1 ，内嵌式 1000
规定显示那种颜色：！important
注意：块级标签可以设定宽和高，内联标签没有宽高
总结：
优先级从高到底
！important
内嵌(1000) > id(100) > class(10) > 标签(1)
当优先级相同时，越往下先执行
CSS的属性操作
css text
文本颜色：color
颜色属性用于设置文字的颜色
颜色是通过CSS最经常的指定
十六进制值：如FF0000
一个RGB值：如RGB(255.0.0)
颜色名称 ： red
p{color：red；} 标签名后跟花括号，在花括号中添加颜色样式
水平对齐方式
text-align属性规定元素中的文本的水平对齐方式
left 把文本排列到左边。默认值：由浏览器决定
right 把文本排序到右边
center 把文本排列到中间
justify 实行两端对齐文本效果
其他文本属性
font-size：10px; 设置文字大小
line-height：200px；文本行高
vertical-align：-4px：设置元素内容的垂直对齐方式，只对行内元素有效，对块级元素无效
text-decoration：none：text-decoration属性用来设置或删除文本的装饰
主要是用来删除链接的下划线
font-family：Lucida Bright 字体
font-weight：lighter/bold/border/ ：字体粗细
font-style：oblique 字体倾斜效果
text-indent：150px；首行缩进150px
letter-spacing：10px 字母间距
word-spacing：20px 单词间距
text-transform：capitalize/uppercase/lowercase 文本转换，用于所有字句变成大写，小写字母，或每个单词首字母大写
背景属性
backgroud-color：cornflowerblue 背景颜色
background-image：url('1.jpg'); 背景影像
background-repeat： no-repeat;(repeat:平铺满) 背景重复方式
background-position：right top（20px 20px）; 背景定位
边框属性
border-width：20px；边框宽度
border-style(required)：solid； 边框样式
border-color：chartruse；边框颜色
边框单独设置各边
border-top-style：dotted；上边框样式
border-right-style：solid；有边框样式
border-bottom-style：dotted；下边框样式
border-left-style：none；左边框样式
列表属性
list-style-type 设置列表项标志的类型
list-style-image 将图像设置为列表项的标志
list-style-postion 设置列表中的列表项标志的位置
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-type属性指定列表项标记的类型
ul{ list-style-type：square；}
使用图像来替换列表项的标记
ul{list-style-image：url('');}
dispaly属性
none 空
block 块
inline 行内
inline-block 行内块
none(隐藏某标签)
p{display：none；}
visibility：hidden可以隐藏某个元素，隐藏的元素与为隐藏的元素占用一样的空间
display：none可以隐藏某个元素，且隐藏的元素不会占用任何空间
block(内联标签设置为块级标签)
span{display“block；}
注意：一个内联元素设置为display：block是不允许有它内部的嵌套块元素
inline(块级标签设置为内联标签)
li{{display：line}
inline-block
display：inline-block可做列表布局，类似图片见的间隙小bug可以通过如下解决
outer{
border：3px dashed；
word-spacing：-5px；
}
外边距(margin)和内边距(padding)
margin：用于控制与元素之间的距离；margin最基本的用途就是控制元素周围空间的间隙，从视觉角度上达到互相隔开的目的
padding：用于控制内容与边框之间的距离
Border(边框)：围绕在内边距和内容外的边框
content(内容)：盒子的内容，显示文本和图像
margine(外边距)
单边外边距属性：
margin-top：100px；
margin-bottom：100px；
margin-right：50px；
margin-left：50px；
居中应用
margin：0 auto；
padding(内边距)
float属性
基本浮动规则
