Web前端（二）

CSS

• CSS:Cascading层叠 Style样式 sheet表,css用于美化页面，html相当于盖房子，css相当于装修

CSS的引入方式

• 三种引入方式：

• 内联样式： 把样式代码写在标签的style属性里面，缺点：不能复用

  <div style="color: red">今天是星期一，好困哦！</div>
  

• 内部样式： 在页面的head标签内部添加style子标签，在style标签内部写样式代码，缺点：只能当前页面复用，不能多页面复用

• 外部样式： 在单独的css文件中写样式代码，在页面中通过link标签把样式文件引入当前页面

三种引入方式的优先级

1. 内联优先级最高
2. 内部和外部优先级相同，后执行的覆盖先执行的

CSS选择器

1. 标签名选择器

2. 格式:
   标签名{ 样式名称1:值; 样式名称2:值; }

3. id选择器

4. 格式： #id{ 样式名称1:值; 样式名称2:值; }

5. 通过id选择器选择页面中的某一个元素

6. 类选择器

7. 格式： .class{ 样式名称1:值; 样式名称2:值; }

8. 分组选择器

9. 分组选择器可以将多个选择器合并成一个选择器

10. 格式： div,#abc,.c1{ 样式名称1:值; 样式名称2:值; }

11. 属性选择器

12. 格式： 标签名[属性名=‘值’]{ 样式名称1:值; 样式名称2:值; }

13. 子孙后代选择器

14. 格式： div p span{ 样式名称1:值; 样式名称2:值; }

15. 子元素选择器

16. 格式： div>p>span{ 样式名称1:值; 样式名称2:值; }

17. 伪类选择器

18. 用于选择元素的状态

19. 状态有：未访问状态、访问过状态、悬停状态、点击状态

20. a:visited{} a:link{} a:hover{} a:active{}

21. 任意元素选择器

22. 格式 *{} 选择所有元素

常见样式

颜色的赋值方式

• 三原色 红绿蓝 red green blue rgb
• 颜色单词赋值
• 6位的16进制 #0000ff
• 3位的16进制 #f00
• 3位的10进制 rgb(0-255,0-255,0-255)
• 4位的10进制 rgba(0-255,0-255,0-255,0-1) 0-1值越小越透明 alpha

背景图片

    设置背景图片
    background-image: url("../imgs/1.jpg");
    设置图片尺寸
    background-size: 100px 100px;
    background-repeat: no-repeat;/* 禁止重复 */ 
    设置显示位置
    /* background-position: left bottom; *//* left right top bottom center */
    background-position: 90% 90%;

布局相关（盒子模型）

• 盒子模型由以下几种组成 元素宽高、元素外边距、元素内边距、元素的边框

元素宽高

• 通过width、height给元素宽高赋值
• 通过像素和上级百分比赋值
• 块级元素可以修改宽高， 行内元素不能修改宽高，只能由内容决定

元素的外边距

• 设么是外边距：元素距上级元素或相邻兄弟元素的距离，称为外边距
• 注意事项：
  1. 块级元素可以给元素添加四个方向的外边距，行内元素只能添加左右外边距，上下外边距没效果
  2. 行内元素左右外边距相加 ，块级元素上下相邻取最大值
  3. 当元素的上边缘和上级元素的上边缘重叠时，给元素添加上外边距会出现显示异常，通过给上级元素添加overflow:hidden解决此问题
• 赋值方式： margin-top/left/right/bottom margin:10px; //四个方向全部是10px margin:20px 50px; 上下20px 左右50px margin:0 auto; 重要 水平居中 margin:10px 20px 30px 40px; //上 右 下 左 顺时针

元素边框

• 赋值方式： border:1px solid red border-left/right/top/bottom

• 注意事项：

• 块级元素边框全部生效，并且会影响元素所占的宽高，行内元素边框全部生效 但是只影响元素所占宽度 不影响元素所占高度

• 盒子模型精简版： 宽高 行内元素不能修改宽高，由内容决定 外边距 行内元素不能添加上下外边距 左右相加 上下取最大值 显示异常 overflow:hidden 边框 行内元素边框不影响元素所占高度

盒子模型之内边距

• 什么是内边距：元素边框距内容的距离称为内边距
• 赋值方式：和外边距赋值方式类似 padding:10px; padding:10px 20px; 上下 左右 padding:10px 20px 30px 40px; 上右下左
• 注意事项：行内元素上下内边距有效果但是不影响元素所占的高度
• 如果需要移动元素的文本内容只能通过元素的内边距移动
• 如果需要移动的是元素的子元素有两种移动方式，1. 给元素添加内边距，切记此种方式会影响元素的宽高 2. 给子元素添加外边距(推荐)

行内元素特殊点

1. 不能修改宽高
2. 不能添加上下外边距
3. 边框不影响所占高度
4. 内边距不影响所占高度

文本相关

1. 水平对齐方式 text-align:left right center
2. 文本修饰 text-decoration: overline/underline/line-through/none
3. 文本阴影 text-shadow:颜色 x偏移 y偏移 浓度
4. 文本颜色 color:red;
5. 行高 line-height: 可以控制文本垂直居中

字体相关

1. 字体大小 font-size
2. 字体加粗 font-weight:bold/normal
3. 斜体 font-style:italic
4. 字体设置 font-family:xxx,xxx,xxx;

溢出设置 overflow

• hidden：超出隐藏
• visible：超出显示（默认）
• scroll：超出滚动显示

显示方式 display

• block：块级元素的默认值 ，可以修改宽高，只能独占一行
• inline：行内元素的默认值，可以共占一行，不能修改宽高
• inline-block:行内块，既可以修改宽高，也可以共占一行

定位方式

position定位

• 有四种定位方式
• 静态定位static（文档流）
• 默认的定位方式
• 行内元素从左向右，块级元素从上到下
• 相对定位relative
• 元素不脱离文档流从元素所在位置做位置偏移（通过top、left、right、bottom控制元素的位置）
• 绝对定位absolute
• 元素脱离文档流 元素相对于窗口（默认）或某一个上级元素(需要给上级元素添加postion：relative)做位置偏移
• 固定定位fixed
• 脱离文档流 元素相对于窗口做位置偏移

浮动定位 float

• 浮动定位脱离文档流，元素从当前所在行向左或向右浮动，直到撞到上级元素边框或其它浮动元素停止
• 当纵向排列的元素需要改成横向排列时使用浮动定位
• 如果一行装不下会自动换行，换行时有可能被卡住。
• 如果元素的高度为自动识别高度，元素内部的所有子元素全部浮动后，自动识别的高度为0，可以通过给元素添加overflow：hidden 解决此问题
• 如果元素上面的其它元素浮动，则元素会自动往上顶，如果不希望元素顶上去给元素添加clear属性

CSS的三大特性

1. 继承性： 子元素可以继承上级元素的部门样式，只能继承文本相关和字体相关的样式
2. 部分元素不受继承影响，比如超链接a不受继承影响、h1-h6字体大小不受继承影响
3. 层叠性： 当不同的选择器选择到同一个元素，如果作用的样式不同则全部层叠到一起响应，如果作用的样式相同则由优先级决定
4. 优先级：作用范围越小优先级越高，直接选中优先级高于间接选中(继承属于间接选中) id>class>标签名

行内元素的垂直对齐方式 vertical-align

• top 上对齐
• bottom 下对齐
• middle 中间对齐
• baseline 基线对齐 默认