HTML常用于在网页中显示内容，当然，还可以是布局，但是比较不方便，所以，引进了CSS
CSS全称Cascading Style Sheets，中文名：层叠样式表
帮助文档：CSS.chm
作用:布局和美化网页
特点：
- 和HTML一样，是一种标记语言，可以由浏览器直接执行
- 大小写不敏感
- CSS文件是一个文本文件，后缀名为css
- 嵌套在HTML中使用
Css规则
- 语法
- CSS定义由选择器（selector）、属性（property）及属性值（value）组成；
- 格式：selector{property:value;}
- 选择器包括
- 类型选择器：
- 定义：HTML标签
- 使用：直接使用标签
- 类型选择器：
定义 使用
-
-
- class选择器：
- 定义：标记名.类名 或 .类名
- 使用：class="类名"
- 标记名为html标签，“标记名.类名”表示只有使用该标签并class值为该类名时，才使用该选择器；
- “.类名”表示只要class值为该类名，就会使用该选择器
- class选择器：
-
定义 使用
-
-
- id选择器：
- 定义：标记名#id值 或 #id值
- 使用：id="id值"
- 标记名为html标签，“标记名#id值”表示使用该标签并id为该值时，才使用该选择器
- “#id值”表示只要id为该值，就会使用该选择器
- 同一页面id值是唯一的（是的，如果同一页面有两个相同的id，样式也能显示出来，但是这样有违逻辑，并且 将来使用js调用id时，会出现混乱）
- id选择器：
-
定义 使用
-
-
- 包含选择器：
- 多种选择器的层次组合，选择器用空格隔开，各选择器由左到右，为包含关系
- 定义：各选择器符组合，用空格隔开
- 使用：各选择器嵌入使用
- 层数不限，但建议不要太多，影响维护和seo
- 包含选择器：
-
定义 使用
-
-
- 群组选择器：
- 同时定义多个选择器为同一属性
- 定义：各选择器组合，用","分隔开
- 使用：各分隔符直接使用
- 群组选择器：
-
定义 使用
-
-
- 伪元素选择器：
- 对html元素不同状态的一种定义方式
- 定义：标签:伪元素
- 使用：该标签的不同状态使用不同属性
- 伪元素选择器：
-
定义 使用
-
- 属性与属性值用":"分隔开，多个属性值用";"分隔
- 注释
- 格式：/*.......*/
- 长度单位
- 相对单位（常用）
- px：像素
- em：相对于当前对象内文本的字体尺寸
- %：百分比
- 绝对单位（不常用）
- pt：点
- cm：厘米
- mm：毫米
- 相对单位（常用）
- 颜色单位和URL值
- 颜色：
- #rrggbb
- #rgb
- rgb(x,x,x)（不常用，浏览器不兼容）
- rgb(x%,x%,x%)（不常用，浏览器不兼容）
- URL
- 表示：url(address)
- 颜色：
HTML中使用CSS的方式
- 内联样式表
- 直接在标签中使用
- 使用style属性，嵌入css键值对
- 使用灵活，但失去了CSS的作用
- 内嵌样式表
- 在<head>标签中，使用<style>标签
- 将要使用的CSS样式写在<style>标签中
- <style type="text/css">css</style>或者<style>css</style>
- 外部链接样式表
- 外部链接css文件，文件中直接输入css内容
- 优点：
- 使用外接的css文件，浏览器带有缓存功能，不用每次都下载
- 多个文件共享
- 使用<link>标签引入HTML中，格式为<link type="text/css" rel="stylesheet" href="*.css" />
三种格式的优先级，就近原则：内联式>内嵌式>外链式
内联元素与块级元素
- 内联元素
- 标签中的内容都在同一行，不会自动换行
- 不可设置宽和高
- 块级元素
- 标签中的内容会自动换行
- 可设置宽和高
CSS字体属性
- 多属性写在同一行，用复合属性<font>，顺序必须为 [[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ],<font-size>和<font-family>为必选项。
- 单属性分开写
- <font-style>属性：设置字体是否为斜体，默认值为normal；
- <font-variant>属性：设置字体是否为小型的大写字母，默认值为normal；
- <font-weight>属性：设置字体粗细，默认值为normal；
- <font-size>属性：设置字体大小，常用单位为"px"或"%"，默认值为normal；
- <font-family>属性：设置字体，可设置多种字体，用“,”隔开，浏览器会按顺序检索是否存在该字体以显示，字体名称为中文时，要用单引号引起。默认值根据浏览器选择。
- <font-stretch>属性：设置字体宽度，默认值为normal；
CSS背景属性
- 多属性写在一行，使用复合属性<background>，属性值为[ background-color ] || [ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]，其他参数不填时，默认无条件覆盖。
- 单属性分开写
- <background-color>：设置背景色，默认为transparent；
- <background-image>：设置背景图片，用"url()"设置图片路径；
- <background-repeat>：设置背景图片填充效果，默认为repeat；
- <background-position>：设置背景图片的填充位置，默认值为"0% 0%"，常用单位"%"和"px"。
小技巧：可设置一个区域的<weight>和<height>属性，<background-repeat>属性可填充该区域，如作为导航条等；<background-position>属性可分别截取图片一部分，分开现实，减少网页加载时间。
CSS文本属性
- <letter-spacing>：设置字符间距，允许使用负值，默认值为normal
- <word-spacing>：设置单词间距，允许使用负值，默认值为normal
- <text-decoration>：向文本添加修饰，underline下划线，overline上划线，line-through删除线
- <text-align>：水平对齐方式，centen居中，right右对齐，left左对齐
- <line-height>：设置对象行高，当行高与区域高度相同，文本垂直居中
- <text-indent>：设置文本缩进，单位可为em（字符）、px（像素）、%（百分比）
- <color>：设置字体颜色
CSS边框属性
- 多属性合并写，使用复合属性<border>，属性值顺序为[ border-width ] || [ border-style ] || [ border-color ]
- <border-left>、<border-right>、<border-top>、<border-bottom>：设置左线、右线、上线、下线的属性，属性值顺序为[ border-width ] || [ border-style ] || [ border-color ]
- 单属性分开写
- <border-style>：设置边框样式，常用dotted（点状）、dashed（虚线）、solid（单实线）
- <border-width>：设置边框宽度，不允许为负数，<border-style>属性设为none，本属性失去作用
- <border-color>：设置边框颜色
CSS列表属性
- <list-style-type>:设置列表项的标记为预设标记
- <list-style-image>：设置列表项的标记为自选标记，“url()”设置标记的地址
- <list-style-position>：设置表项在文本的位置，outside表示标记放置在文本以外，inside表示标记放置在文本以内
DIV+CSS页面布局
- 优势：
- 内容与布局分离
- 代码简洁，提高页面浏览速度
- 易于维护和修改
- 提高搜索引擎对页面的索引效率
- div和span
- div：块级元素，会自动换行，能设置宽高
- span：内联元素，不会自动换行，不能设置宽高
W3C盒子模型
- maigin：外补白（盒子四边的外延申边距）
- maigin：可使用1~4个参数来设置外补白大小
- maigin-top、maigin-right、maigin-bottom、maigin-left：分别设置盒子上、右、下、左外补白大小
- border：边框
- border：可使用1~4个参数来设置边框宽度
- border-top、border-right、border-bottom、border-left：分别设置盒子上、右、下、左边框大小
- padding：内补白（盒子内容与边框的距离）
- padding： 可使用1~4个参数设置内补白大小
- padding-top、padding-right、padding-bottom、padding-left：分别设置盒子上、右、下、左内补白大小
DIV定位
- position：设置定位方式，参数为static、absolute、relative、fixed
- absolute：绝对定位，位置相对于文档流，会脱离文档流
- relative：相对定位，位置相对于自己原来的位置，不会脱离文档流
- fixed：固定定位，位置相对于浏览器窗口
- 绑定模式：父层使用"relative"定位，子层使用"absolute"定位，子层将于父层“绑定”，子层的位置不再相对于文档流，而是相对于父层
- top：盒子与顶部的距离
- right：盒子与右边的距离
- bottom：盒子与底部的距离
- left：盒子与左边的距离
- z-index:设置层叠顺序，默认以0开始，可为负数
- text-align：水平对齐方式，centen居中，right右对齐，left左对齐
- line-height：设置对象行高，当行高与区域高度相同，文本垂直居中
- float：设置对象为浮动效果
- 只会水平浮动，不会不会垂直浮动
- 会脱离文档流
- 多个对象同时设置为浮动时，各对象并排显示
- left：左浮动
- right：右浮动
- clear：清除浮动
- right：清除右浮动，对象右边不能存在浮动对象
- left：清除左浮动，对象左边不能存在浮动对象
- both：清除两边浮动，对象两边不能存在浮动对象
DIV的显示
- display：设置元素显示发方式
- block：以块级元素方式显示
- inline：以内联元素方式显示
- none：隐藏该元素，隐藏后，不占用位置
- visibility：设置嵌套关系的显示
- inherit：显示属性与父层相同，父显子显，父隐子隐
- visible：无论父层是否显示，子层依然显示
- hidden：无论父层是否显示，子层均隐藏且占用位置
- overflow：内容超出边界时的显示方式
- auto：自动处理，超出时显示滚动条，未超出则不显示
- scroll：始终显示滚动条，无论是否超出
- visible：超出也直接显示，不做处理
- hidden：超出部分隐藏，不显示滚动条
时间： 2024-10-13 22:05:05