CSS笔记(CSS3)
1. 什么是CSS？
CSS被成为 层叠样式表
美化网页
2. 怎么去编写CSS？
第一种方式: 内部样式表
在head标签中 创建 style标签 里面就是css代码
例如: <head>
<style>
</style>
</head>
第二种方式: 行内样式表
直接在标签中添加 style属性 里面就是css代码
语法:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
行内式只对其所在的标签及嵌套在其中的子标签起作用
第三种方式: 外部样式表（外联）
引入.css文件 .css文件里面就是css代码
通过link标签将外部样式表文件链接到HTML文档中
语法:
<head>
<link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>
3. css书写规范
选择器 {
属性名:属性值;
属性名:属性值;
}
4. 选择器
基础选择器
标签选择器：
标签名 { 属性名:属性值; }
标签名指的是 HTML标签的名字
注意事项:
1. 会选择当前页面所有的标签
2. 优先级特别低
类选择器:
.类名 { 属性名:属性值; }
类名 必须提前在 html中去定义
类名 属性 在html标签中 class="类名"
例子： <h1>我是测试用的</h1> <h1 class="test1">我是测试用的2</h1>
.test1 {
color:red;
}
ID选择器:
#ID名 { 属性名:属性值; }
ID名 必须提前在 html中去定义
ID名 属性 在html标签中 id="id名"
伪类选择器
伪类状态:
:link a标签激活前
:visited a标签激活后
:hover 鼠标悬浮时
:active 鼠标点击时
伪类元素: (在同一父元素下 同一级 才有效果)
:first-child 选择第一个
:last-child 选择最后一个
:nth-child 选择 第n个 n指在其父元素中所处位置
选择父元素下 所处位置(标签所在第几项包含其它标签)
复合选择器
1. 后代选择器:
语法： 选择器 选择器 {
属性名:属性值;
}
用来选择元素或元素组的后代
在选择器选择的后面元素都会被选择
2.
5. 文字属性
1. color 字体颜色
值类型: 英文单词 16进制色值 rgb色值
red #666666 rgb(红,绿,蓝) 值大小 0 - 255 值越大颜色效果越深
2. font-size 字体大小
值类型: 数字 单位 px 像素值
em 像素比例
注意点：
1. 网页的默认字体大小 16px
2. 字体大小 最小12px 没有最大
3. 字体大小尽量使用 偶数 使用奇数在低版本浏览器有兼容效果
3. font-weight 字体粗细
值类型: 100 - 700 必须是100的整数
特殊值 ： bold 等同于 700
默认值 400
4. font-family 字体
值类型： 字体名
微软雅黑 楷体 黑体
前提是电脑必须安装该字体
5. font-style 字体风格
值类型: italic 斜体
6. 元素显示方式属性
1. width 宽度
元素的宽
值类型：
数字 单位： px
em
% 百分比 根据父类宽度计算
2. height 高度
元素的高
值类型：
数字 单位： px
em
% 百分比 根据父类宽度计算
7. CSS外观属性
1. line-height 行高
行高与 字体大小相对应
1.5 = 字体大小 * 1.5
2. text-align 水平对齐方式
值类型: left centet right
居左 居中 居右
3. letter-spacing 改变字间距
字与字之间的距离 值越大间距越大
值类型： 数字 单位： px
em
1em 等于一个字的宽度
4. text-indent 首行缩进
首行字距离左边的距离 值越大间距越大
值类型： 数字 单位： px
em
1em 等于一个字的宽度
5. 单词间距 wrod-spacing 单词之间的间距
6. 装饰字体 text-decoration: line-through ;
值类型： none 无
line-through 中划线
underline 下划线
overline 上划线
7. 文字阴影 text-shadow
text-shadow: 水平偏离值 垂直偏离值 阴影大小 阴影颜色;
8. 颜色透明
rgba() a代表透明度 0 - 1之间 可以为小数
0代表透明 0.5半透明
8. CSS特性
CSS优先级:
后写的CSS 优先级 高于 先写的CSS
最高优先级
想提高style标签中的css样式的优先级 可以使用 !important
那么优先级最高
CSS权重:
不同的选择器 对应着不同的优先级
这种优先级 被称为 CSS权重
权重有固定的算法
标签选择器 对应的权重值 1
类选择器 对应的权重值 10
ID选择器 对应的权重值 100
行内样式 对应的权重值 1000
!important 对应的权重值 无穷大
当权重一样时 再重新去比较css的书写顺序
9. 标签的显示模式
块级元素 block
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
常见的块元素: <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素 inline
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
(3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊）
行内块元素 inline-block
在行内元素中有几个特殊的标签—— <img />、<input />、<td>，可以对它们设置宽高和对齐属性，称它们为行内块元素。
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
标签显示模式转换 display
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
10. CSS复合选择器:
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
1. 交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格
交集选择器 是 并且的意思。 即...又...的意思
例如： div.box { 属性：属性值 }
2. 并集选择器
并集选择器（CSS选择器分组）是各个选择器通过 , 连接而成的.
任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。
只要逗号隔开的，所有选择器都会执行后面样式。
例如: a,p,div,.box { color:red; } 最后a p div .box 字体都会变红色
3. 后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，
子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签
例如: a div .box { color:red; } a 里面的 div div 里面的 .box类 字体变红色
4. 子元素选择器
子元素选择器只能选择作为某元素子元素的元素
写法：父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
例如: .demo > h3 {color: red;}
5. 属性选择器
选取标签带有某些特殊属性的选择器
语法： input[type="password"]
选择 input类型为password的
6. 伪元素选择器（CSS3)
1. E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
2. E::first-line 文本第一行；
3. E::selection 可改变选中文本的样式；（只能设置 字体颜色 和 背景颜色）
11. CSS 背景(background)
CSS 可以添加背景颜色和背景图片，以及来进行图片设置。
1. 背景图片(background-image)
语法：background-image : url (图片地址)
2. 背景平铺（background-repeat）
语法：background-repeat : repeat | no-repeat | repeat-x | repeat-y
值类型:
repeat : 背景图像在纵向和横向上平铺（默认的）
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
3. 背景位置(background-position)
语法：
第一种语法 :background-position : x y ;
第二种语法 :background-position : position position ;
参数：
x , y : 百分比 数字
position : top | center | bottom | left | center | right
如果想设置图片居中 : (background-position : center;)
4. 背景颜色(background-color)
设置背景的颜色
语法；background-color: 颜色英文单词 | 16进制 | rgb()
5. 背景简写 (background)
语法： background: 背景颜色 背景图片 背景平铺 背景位置;
6. 背景大小(backgorund-size)
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，
语法: background-size: 宽 高;
例如: background-size: 300px 100px;
12. CSS盒子模型：
概率： 盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
盒子边框（border）
边框就是那层皮。
语法：border : border-width || border-style || border-color
其它写法:
边框宽度 border-width: 像素;
边框颜色 border-color: 颜色值;
边框样式 border-style: none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
上边框 border-top-style:样式;
border-top-width:宽度;
border-top-color:颜色;
border-top:宽度 样式 颜色;
下边框 border-bottom-style:样式;
border- bottom-width:宽度;
border- bottom-color:颜色;
border-bottom:宽度 样式 颜色;
左边框 border-left-style:样式;
border-left-width:宽度;
border-left-color:颜色;
border-left:宽度 样式 颜色;
右边框 border-right-style:样式;
border-right-width:宽度;
border-right-color:颜色;
border-right:宽度 样式 颜色;
边框圆角(CSS3):
语法:border-radius: 左上角 右上角 右下角 左下角;
制作一个圆形 将值设置宽或者高的一半 ：border-radius:50%;
一个值： 左上 | 右上 | 右下 | 左下
二个值： 左上｜右下 右上｜左下
三个值： 左上 右上｜左下 右下
四个值： 左上 右上 右下 左下
内边距（padding）:
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
1个值padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素
2个值padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针
外边距 (margin) :
盒子与盒子之间的距离
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
