CSS → 页面样式

1.内嵌式 --> 代表当前页面

css写在style标签中，style标签一般写在head标签里面，title标签的下面

2.行内式写在标签内的属性 css

style:写在标签内的属性 css的行内式 --> 代表当前行之后会配合js使用

3.外联式：单独的css文件，配合link标签引入

css外链式的文件夹分类

建立一个css基础文件夹

1、base.css(放入清楚默认的代码也可以是公共类的代码)

2、common.css （存入各个页面相同的样式表 : 头, 尾部版心 ）

3、index.css (放index页面的样式表 )

4、images文件夹 （固定图片 logo之类）

5、uploads文件夹 （产品图片类随时更换图片那种）

6、lib文件夹 （放入外部css文件如字体图标 js 框架等）

link:属于css的外链式 --> 代表多个页面开发项目常用

link rel="stylesheet" href="./css入门.css"

选择器作用：选中页面中对应的标签（找她），方便后续设置样式（改她）
标签选择器：标签名 { css属性名：属性值； }
类选择器：.类名 { css属性名：属性值； }
id选择器：#id属性值 { css属性名：属性值； }
通配符选择器：* { css属性名：属性值； }

文字的颜色： color: red（红色）;

文字大小： font-size: 20px;

背景颜色 background-color:

背景颜色默认透明值 transparent; rgba（0，0，0，0）;

透明值 background-color: transparent; rgba（0，0，0，0）

宽度 width: 900px;

高度 height: 150px;

文本

textarea:文本域标签

文本水平对齐方式 */ left: 左对齐（默认）

right: 右对齐

center：居中

margin: 0 auto; 让div p h(大盒子)水平居中

通过行高设置单行文本垂直居中效果

在网页精准布局的时候，会设置行高为1取消上下间距

文本缩进（首行缩进）text-indent 数字➕px 数字➕em(1em=当前标签font-size的大小)

line-height: 控制行间距

text-decoration: underline; 下划线作用

text-decoration: line-through;删除线作用

text-decoration: overline;上划线作用几乎不用

text-decoration: none;无装饰作用等于默认没有在a标签中比较常用

target="_blank" 在新窗口跳转

关键字：normal正常(一般默认）bold加粗

       纯数字：100-900的整百数属性 400默认正常文字大小 少数使用
       font-weight: bold; 
       italic：倾斜
       font-style: italic;

文字字体系列 font-family:隶书;

字体相关样式的连写属性名：font 属性值：以上单个取值的合写，取值之间用空格隔开

合写有顺序要求：style weight size family

swsf(稍微舒服谐音方便记忆)

省略要求：前两个属性可以省后面不行会出问题

字体样式

字体大小：font-size
字体粗细：font-weight
字体样式：font-style
字体类型：font-family
字体类型：font属性连写
文本样式
行高：line-height

1.复合选择器

后代选择器：空格

作用：根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素：选择器1 选择器2 { css }空格

子代选择器：>

作用：根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素：选择器1 > 选择器2 { css }

2、并集选择器

作用：同时选择多组标签，设置相同的样式选择器1 ，选择器2 { css }

3.交集选择器：紧挨着

作用：选中页面中同时满足多个选择器的标签选择器1选择器2 { css }

4.Emmet语法

快速内部文本编写 ul>li按回车

创建多个 ul>li*3按回车

5.伪类选择器 hover

选择器➕:hover 改变鼠标停止时变的颜色 a:hover

鼠标悬停的显示效果 background-color: #ffa500;

text-decoration: underline; 链接加下划线

.box:hover{
    width: 200px;
    height: 200px;
    background-color: orange;橘色｝

背景图片（bgi） background-image: url(图片路径);

背景平铺（bgr）

background-repeat;（默认平铺）

background-repeat: no-repeat; (不平铺）

background-repeat-x（沿水平方向平铺）

background-repeat-y（沿垂直方向平铺）

背景位置（bgp）

（背景位置 background-position: 水平方向位置垂直方向位置;）

方法1：（最多只能显示9个方位）少用

水平方向方位词：left左 center中 right 右

垂直方向方位词：top 上 center中 bottom下

方法2：数字➕px（坐标）

原点：0 0（盒子的左上角）以图片左上角为图片原点

水平方向方位词 x轴：例如：200px（往右移）

垂直方向方位词 y轴：例如：400px（往下移）

两个方法可以一起使用例如：第一个为水平方位center 第二个为垂直方位300px

背景属性连写

背景属性：background

书写顺序：background：color（背景颜色）image（背景图片）repeat（背景平铺） position（背景位置坐标）

background: skyblue url(./mmexport1395417941478.jpg)no-repeat center center;

如果既要连写样式又要单独样式，要么单独样式写在连写下面，要么写在连写里面

背景相关属性

img是默认标签有默认宽高为原尺寸

div➕背景图片背景图片仅是装饰css的样式不能撑开div标签需要设置宽高

元素三大显示模式

1.1 块级元素

属性：display：block

显示特点： 1. 独占一行（一行只能显示一个）

宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高
代表标签： div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

2.1 行内元素

属性：display：inline 显示特点：

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高代表标签： a、span 、b、u、i、s、strong、ins、em、del……

3.1 行内块元素

属性：display：inline-block

显示特点：

一行可以显示多个
可以设置宽高代表标签：input、textarea、button、select……

特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

元素转化

display: block;转为块元素

display: inline-block 转为行内块元素

统一不同浏览器文字大小，直接给body标签设置统一的font-size ，

text-align: center;

如文本 span a input img等标签需要水平居中以父元素设置方可

margin: 0 auto;块级元素的居中以当前元素即可

如div p等大盒子标签

line-height: 数字px;让文字文本及垂直居中

CSS → 页面样式（上）