css样式方式：内联方式 、内部样式表、外部样式表。
前端数据分为三个部分：框架（html）、表现（css样式）和行为（javascript）。css样式一共分为四种内联式、内部式、外部链接式和外部导入式。
1、联式：直接写在html标签内部 写法：
<标签名 style="样式名1：样式值1；样式名2：样式值2；"> </标签名>
2、内部式：使用选择器 样式块 比较方便
写法： 选择器{ 样式名1：样式值1； 样式名2：样式值2； }
3、外部链接式：把css样式写在另外的文件里用 link 将其引用过来
写法：
### 4、外部导入式：写法：
<style>
@import url（"url地址"）；
</style>
5. 颜色
- 用颜色的名字表示颜色,比如:red
- 用16进制表示演示 比如:#FF0000
- 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间\
一般都用16进制表示颜色
6.单位
- px:像素,与分辨率设置相关.
- %相对于浏览器的百分之多少,可以对宽度width做设置,不可以对height做设置
7. 文本样式
1. color:设置文本颜色
2. text-align:设置文本对齐方式
center
left
right
3. letter-spacing:字间距/字母间距
4.line-height:行高(第二行的行高=第一行底部到第三行顶部)
5. text-indent:一般30px就2个
6.text-decoration:文本装饰
- underline:下划线
- overline:上划线
- line-through:删除线
- blink 闪烁(不会用)
7.text-transform:大小写转换
uppercase:全部大写
lowercase:全部小写
capitalize:每个单词以大写开头
8.设置字体：
font-size:设置字体的大小
font-weight:设置字体的粗细,bolder最粗
font-family:设置文字字体,楷体,隶书等等
9.边框和背景：
1. 为元素应用边框
border-width:边框宽度
border-style:边框样式
none没有边框
dashed虚线
solied实线
double双线
dotted圆点线边框
inset内嵌 outset外凸
ridge 脊线边框
bolder-color:边框颜色
2.设置元素背景：
background-repeat:背景图重复方式,一般no-repeat
background-size:背景图尺寸
background-position:背景图位置
### 选择器
css样式中内部式需要用到选择器。选择器就是在代码段中通过标记的办法快速选择一个地方然后给他加上css样式。 选择器分为：常用选择器、关系选择器、属性选择器、伪类选择器和伪元素选择器**。
1、常用选择器
常用选择器有：
1、标签选择器 标签名{ }
2、id选择器 #id名字{ }
3、class类选择器 .类名{ }
4、并集选择器 选择器1，选择器2{ }
5、通用选择器 * { }
写法：
<style>
标签选择器
h2{
font-size: 30px;
color: darkmagenta;
}
id选择器
#abc{
color: red;
}
类选择器
.ab{
font-size: 20px;
}
.bc{
color: red;
}
并集选择器
.ab,#abc{
background-color: darkcyan;
}
通用选择器
*{
text-align: center;
}
</style>
<h2>标题二</h2>
<p class="ab">放假好无聊</p>
<p class="bc">希望快点开学</p>
<p id="abc">真想快点开学</p>
<div>div</div>
2、关系选择器
关系选择器分为：
1、相邻选择器 选择器1+选择器2{ }<br>
2、后代选择器 选择器1 选择器2{ }<br>
3、子选择器 选择器1>选择器2{ }<br>
<style>
相邻选择器
li+li{
color:springgreen;
}
后代选择器
div span{
font-size: 40px;
}
子选择器
div>span{
background-color: yellowgreen;
}
</style>
<div class="divcls">
<ul>
<li>列表第一个</li>
<li id="sec">列表第二个</li>
<li>列表第三个</li>
<li>
<span>div的后代span</span>
</li>
</ul>
<span>div的子代span</span>
</div>
选择器之间的关系：
父元素： 直接包含其他元素，这个元素就是包含元素的父元素
祖先元素：包含其他元素，这个元素就是包含元素的祖先元素
子元素： 直接被包含的元素，这个被包含的元素就是包含元素的子元素
后代元素： 被包含的元素，这个被包含的元素就是包含元素的后代元
3、属性选择器 属性选择器：
选择器 [属性名 = 属性值] 分为以下四种情况：
1、选择器[ 属性名 = 属性值 ] 完全匹配：当属性值和下方完全匹配时才被选择
2、选择器[ 属性名 ^= 属性值] 开头匹配：当属性值和下方开头匹配时才被选择
3、选择器[ 属性名 $= 属性值] 结尾匹配：当属性值和下方结尾匹配时才被选择
4、选择器[ 属性名 * = 属性值 ] 包含匹配：只要下方属性值包含所选属性值就会被选
<ul>
<li abc="abcd" title="这是第一个标签">第一个li标签</li>
<li abc="aber">第二个li标签</li>
<li abc="erab">第三个li标签</li>
<li abc="ercd">第四个li标签</li>
</ul>
4、伪类选择器
伪类选择器：
1、已经访问过的页面 :visited
2、未访问过的页面 :link
3、鼠标悬浮样式 :hover
<style>
已经访问过的页面
a:visited{
color: red;
}
未访问过的页面
a:link{
color: rosybrown;
}
鼠标悬浮样式（变大）
a:hover{
font-size: 30px;
}
</style>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.bilibili.com">bilibili</a>
<a href="http://www.7k7k.com">7k7k</a>
5、伪元素选择器
伪元素选择器
::first-line 向元素的第一行内容添加样式
::first-letter 向元素首字母添加样式
::before 向元素之前添加内容 与content结合使用
::after 向元素之后添加内容 与content结合使用
<style>
向元素的第一行内容添加样式
p::first-line{
color:blue;
}
向元素首字母添加样式
p::first-letter{
font-size: 40px;
}
向元素之前添加内容
p::before{
content:"【";
}
向元素之后添加内容
p::after{
content:"】";
}
</style>
<p>今天天气真好</p>
选择器优先级：ID 选择器 >类选择器 =属性选择器 =伪类选择器 >标签选择器 =伪元素选择器
