css选择器
<style>
p {
color : 颜色
font : 字体
}
<style>
选择器：根据不同的需求吧不同的标签选出来，选择标签用的
选择器分为基础选择器和复合选择器
基础选择器：由单个选择器组成
复合选择器：包括标签选择器,类选择器，id选择器和通配符选择器
标签选择器
标签选择器：将html页面的标签名称作为选择器，按标签名分，为页面的某一指定标签设置统一的css样式，一般不推荐，因为这样是全部的某一标签全部指定了样式的
语法：
<style>
标签名 {
属性1：属性值1；
属性2：属性值2；
属性3: 属性值3；
···
}
</style>
类选择器
如果想要差异化的选择不同的标签，单独选一个或者几个标签，可以使用类选择器
语法：
<style>
.类名 {
属性1：属性值1；
属性2：属性值2；
属性3: 属性值3；
···
</style>
}
结构需要用class属性来调用，例如
.red {
color: red
}
<div class='red'> 红色字体 </div>
此时，上面div标签里面的"红色字体"四个字就会变为红色
口诀：
样式点定义：由.+类名来定义样式
结构类调用：想要定义某种格式，就有某个标签的类class属性来调用该选择器
一个或多个，开发最常用
可以有多类名，即一个class属性里面有多个类名，用空格隔开
使用多类名的意义：
1·有些属性可以共性抽取为一个类选择器里面的样式
2·可以减小代码冗余
3·当要修改某一特性的属性时，方便修改
举例：用类选择器制造一个盒子
代码为
<style>
.green {
width: 100px;
height: 100px;
background-color: green;
}
.blue {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<div class="green">绿色</div>
<div class="blue">蓝色</div>
<div class="green">绿色</div>
也可以写为
<style>
.box {
width: 100px;
height: 100px;
font-size: 30px
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
</style>
<div class="green box">绿色</div>
<div class="blue box">蓝色</div>
<div class="green box">绿色</div>
id选择器
id选择器可以为特定id的html元素指定特定的样式
html元素的id属性来设置id选择器，css中id选择器用‘#’来定义
id只能被使用一次
语法
#id名{
属性1: 属性值1;
···
}
例如：将id为nav元素中的内容设置为红色
<style>
#nav {
color:pink;
}
</style>
<div id="nav"> maoguo </div>
maoguo就会变为粉红色
通配符选择器
在css中，通配符选择器使用"*"定义，它选取页面中所有的元素（标签）
语法：
* {
属性1: 属性值1;
···
}
例如：
<style>
* {
color: red;
}
</style>
将页面所有的字体颜色改为红色
css字体属性
字体系列
css使用 font-family属性定义文本的字体系列
<style>
.weiruanyahei{
font-family:"微软雅黑";
}
</style>
<div class="weiruanyahei"> 微软雅黑</div>
字体大小
css使用font-size来设置字体的大小
<style>
.fontsize {
font-size: 50px;
}
</style>
<div class="fontsize"> 字体大小 <div>
字体粗细
css中使用font-weight来设置字体粗细
<style>
.fontsize {
font-size: 30px;
}
</style>
<div class="fontsize"> 字体大小 <div>
文字样式
css使用font-style来设置文字样式 normal表示正常字体，italic来表示斜体字体
<style>
.fontstyle {
font-style: italic;
}
</style>
<div class="fontstyle"> 字体大小 <div>
字体复合属性
可以使用下面这个代码来规范字体属性
注意:font: font-style font-weight font-size font-family;不能更换顺序
不需要设置的的属性值可以省略，但是必须保留font-size和font-family属性，否则不起作用
<style>
.font {
<!-- font: font-style font-weight font-size font-family; -->
font: italic 700 50px "宋体";
}
</style>
<div class="font"> 字体属性 <div>
文本属性
文本属性可以定义文本的外观，如颜色，对齐文本，装饰文本，文本缩进，行间距等
文本颜色
color表示字体颜色的设置
颜色定义有三种方式
1·预定于的颜色值：red，green，blue，pink。
2·十六进制表示：#ff0000，#FF6600。
3·RGB代码表示：rgb(255.0.0)/rgb(100%,0%,0%)。
文本对齐
text-align：用于设置元素内文本的水平对齐
left:左对齐（默认值）
right:右对齐
center:居中对齐
<style>
.textalign {
text-align: center;
}
</style>
<div class ="textalign"> 我这该死的无处安放的魅力 </div>
装饰文本
text-decoration属性规定添加到文本的装饰。可以给文本添加下划线，删除线，上划线等
1·none:默认，没有装饰(链接默认会有下划线，可以用这个去掉链接的下划线)
2·underline:下划线
3·overline:上划线
4·line-through:删除线
文本缩进
text-indent属性用来指定文本的第一行缩进，通常将段落的首行缩进
em:当前字体元素的一个文字大小单位，是一个相对单位
<style>
.p {
text-indent: 10em
}
</style>
<p> 啊~~ 这该死的无处安放的魅力啊！</p>
啊~~ 这该死的无处安放的魅力啊！
行间距
line-height属性设置文本行间的距离(行高)，可以控制文本行与行之间的距离。
行间距：距离上行的距离和距离下行的距离和字体高度之和(上间距和下间距和字体高度之和)
css引入方式
1·行内式
1·行内样式表(行内式):直接在标签的内部的style属性设置css样式
<div style="color:pink;"> 粉红色行内式 </div>
2·嵌入式
2·内部样式表(嵌入式):就是子啊HTML页面的内部写样式，但是要单独写到<style>标签内部
<style>
.pink {
color: pink;
}
</style>
<div class="pink"> 粉红色嵌入式</div>
3·链接式
3·外部样式表(链接式):单独写到一个css文件里面，之后把css文件引入到HTML页面中使用
分两步：
1·建立一个后缀为.css的文件，将所有的css代码放到这里面
2·在HTML页面中，使用<link>标签引入这个文件
<link rel="stylesheet" href="[css文件路径]">
Emmet语法
快速格式化文档
shift+alt+f
css复合选择器
1·复合选择器由至少2个的基础选择器组合而成
2·常用的复合选择器包括，后代选择器，子选择器，并集选择器，伪类选择器等
后代选择器
例如，页面中同时有无序列表<ul></ul>和有序列表<ol></ol>, 他们之中都有<li></li>标签，但是当我们我们只要选择其中一个的<li></li>标签时，就可以用到后代选择器
语法：
元素1 元素2 {
样式申明
}
表示选择元素一里面所有的元素二标签
<style>
ol li {
color: pink;
}
</style>
<ol>
<li> 我是ol中的li </li>
<li> 我是ol中的li </li>
<li> 我是ol中的li </li>
</ol>
<ul>
<li> 我是ul中的li </li>
<li> 我是ul中的li </li>
<li> 我是ul中的li </li>
</ul>
只有有序列表<ol></ol>里面的字体变粉红色
- 我是ol中的li
- 我是ol中的li
- 我是ol中的li
- 我是ul中的li
- 我是ul中的li
- 我是ul中的li
当出现这这样的情况时
- 我是ol中的li
- 我是ol中的li
- 我是ol中的li
- 我是ul中的li
- 我是ul中的li
- 我是ul中的li
- 我是ul中的li
- 我是ul中的li
- 我是ul中的li
我想要第二个无序列表里面的 最后一行 我是ul中的li变为黄色yellow
此时可以写为
<style>
.red ol li a{
color: yellow;
}
</style>
<ol>
<li> 我是ol中的li </li>
<li> 我是ol中的li </li>
<li> 我是ol中的li </li>
</ol>
<ul>
<li> 我是ul中的li </li>
<li> 我是ul中的li </li>
<li> <a href="#"> 我是ul中的li </a></li>
</ul>
<ul class="red">
<li> 我是ul中的li </li>
<li> 我是ul中的li </li>
<li> <a href="#"> 我是ul中的li </a> </li>
</ul>
- 我是ol中的li
- 我是ol中的li
- 我是ol中的li
- 我是ul中的li
- 我是ul中的li
- 我是ul中的li
- 我是ul中的li
- 我是ul中的li
- 我是ul中的li
后代选择器中的元素也可以是其他任意的基础选择器
<style>
.red ol li a{
color: red;
}
</style>
子元素选择器
子元素选择器只能选择作为某元素的最近一级子元素，简单理解就是选择亲儿子元素
语法：
元素1 > 元素2{
样式声明
}
表示只选择元素一里面所有的最近一级的直接后代(子元素)
例如：将div里面最近一级的<P></P>里面的字体设置为红色
div > a {
color: red;
}
<style>
.divv > a {
color: red;
}
</style>
<div class="divv">
<p> <a href="#"> div标签中p标签中的a标签</a></p>
<a href="#"> div标签直接的a标签</a>
<div>
只把div标签中直接存在的a></a>标签变红
并集选择器
并集选择器可以同时选择多组标签，同时为他们定义相同的样式，通常用于集体声明
通过使用英文逗号(,)连接而成，任何形式的选择器也可以作为并集选择器的一部分
语法：
元素1,元素2···{
样式声明
}
例如：将ul和div标签里面的字体变为红色
ul,div{
color:red：
}
伪类选择器
链接伪类选择器
伪类选择器用于向某些选择器中添加特殊的效果，比如给链接添加特殊效果
语法：
a:[链接效果词]{
}
例如：
<style>
a:hover {
color:green;
}
</style>
<a href= "#"> 鼠标划到我这里变为绿色</a>
focus伪类选择器
focus把表单元素中被鼠标选取的那个标签进行样式更改
例如：下面有三个输入框，鼠标选中哪个，那个输入框就会有变化
<style>
input:focus{
background-color:pink;
color:red;
}
</style>
<input type="text">
<input type="text">
<input type="text">
css元素显示模式
网页的标签很多，在不同的地方会用到不同的标签，了解他们的特点可以更好的帮助我们布局页面
元素显示模式就是元素（标签）以什么样的方式显示，比如<div>自己独占一行，比如一行可以放多个<span>
HTML元素一般分为块元素和行内元素两种类型
块元素
<div></div>就是最典型的块元素
特点：
1·独占一行
2·高度，宽度，外边距以及内边距都可以控制
3·宽度默认是容器（父级宽度）的100%
4·是一个容器及盒子，里面可以放块元素或者行内元素
ps：文字类元素内不能使用块元素，例如p段落标签
行内元素
特点：
1·相邻行内元素在一行上，一行可以显示多个
2·高宽直接设置是无效的
3·默认宽度是他内容本身的宽度
4·行内元素只能容纳文本或者其他行内元素
行内块元素
有一些特殊的标签，<img/>,<input>,<td>他们同时具有块元素和行内块元素的特点
特点：
1·和相邻的行内元素在一行，但是他们之间会有空隙，一行可以显示多个
2·默认的宽度就是他容器本身里面内容的宽度
3·高度，行高，外边距，内边距都可以控制
1899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
