CSS笔记概述
CSS称为层叠样式表，引用样式表的目的是将"网页结构代码"和"网页样式风格代码"分离开
CSS3遵循模块化开发，标准被分为若干个相互独立的模块，有助于理清模块化规范之间的关系，减小完整文件的体积
主流浏览器为了自己的产品利益和推广，定义了很多私有属性用于加强页面显示样式和显示效果，虽然使用私有熟悉可以快速构建效果，但是对网页设计者是个大麻烦
2022/6/13更新
CSS特性
层叠性来使字类可以修改父类的属性(原理：为每一种选择器都分配一个值，然后，将样式中的每个值加在一起)
为啥CSS可以修改子类的样式，是因为有层叠性:如果一个选择器有多个选择符组合而成，则它的特殊性就是这些选择符的权重之和。
继承性：若子类的每个元素的样式都相同，那么可以设置一个父类来继承，这样所有的子类样式都将相同。
行类元素：<b>, <td>, <a>, <img>,<input>，<span>,其中img和input似乎对于能定义宽高的就是块级元素不合理
无法被继承的CSS属性
边框属性
边界属性
补白属性
背景属性
定位属性
布局属性
元素宽高属性
经典布局嵌套的实战案例
设计通讯录[CSS+DIV网页样式与布局从入门到精通 第7章 第一种使用css2样式 第二种使用CSS3样式]
设计表格分组(有下拉框图标)
排版的实战案例
CSS3中的布局
float,display,position（浮动，显示，绝对这三者布局）
1.float
浮动元素的属性要考虑的很多，设定了浮动元素就不会自动添加外边距，而且还要考虑父子元素，兄弟元素。
浮动元素感觉是超脱于布局的，在div布局中随意的排列(就是靠这个来完成水平，网格布局的么
)
浮动元素包裹其他元素会被撑开，而其他元素包裹浮动元素则无事
相反我觉得清除浮动更有效
使用clear属性来清除
2.display
显示对象的作用，对象有什么要显示的么
厉害的使可以指定元素显示的方式，块级元素，行内元素，就省了或者多了换行的功能(block,inline)
还可以指定该元素是否显示(none)
3.position
https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
绝对定位
/* 对象脱离文档流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则参照body元素*/
position: absolute;
CSS3中元素的大小
外边距(margin)
内边距(padding)
元素大小(尺寸)
边框(border)
响应式布局的实战案例
使用@media来定义媒体查询(响应式界面)
/* max-width:如果视图窗口的宽度小于600像素，则醒目显示，并显示提示性的文字 */
@media screen and (max-width: 600px) {
响应式登录网站首页
CSS基础语法(待添加具体实例)
select{property:Value}
选择器 属性 值
例如：p{color:red}
一般color默认为字体颜色，而background-color默认为背景颜色。background也可设置为背景颜色，如: background: #c6ceda;
background background-color之间的关系
1.background： background可以添加背景色color，添加图片url，调整平铺状态repeat，还可以调整图片的位置 第一个是 left和right 第二个值是topbottom。
2.background-color： background-color只能调整背景颜色
CSS控制HTML5页面的方式通常有:(按优先级排序)
- 行内样式
- 内嵌样式
- 链接样式
- 导入样式
例如：
1.行内样式
在HTML标记中使用style属性，该属性的内容就是CSS的属性和值
<p style="color:red">段落样式</p>
2.内嵌样式
将CSS样式代码添加到之间,并用标记来声明
<head><style type="text/CSS">p{color:red}</style></head>
3.链接样式
是指在外部定义CSS样式表并形成.css为扩展名的文件，然后在页面中通过标记链接到页面中，该链接语句必须放在标记区
<link real="stylesheet" type="text/CSS" herf="1.css">
real一般也可不写，他表示链接到的样式表名stylesheet
type表示链接到的样式表类型为css
herf指定CSS样式表的文件的路径，此处表示当前路径下名为1.css文件(也就是说1.css文件与当前路径为同一路径)
4.导入样式
指在内嵌样式表的style标记中使用@import导入一个外部的CSS文件
CSS选择器按用途分
- 标记选择器
- 类选择器
- 全局选择器
- ID选择器
- 伪类选择器(制作页面经常使用)
1.标记选择器
tagName{property:Value}
标记名称 CSS3属性 CSS3属性值
2.类选择器作用：
用来标记一系列定义相同的呈现方式
.classValue{property:Value}
3.全局选择器
*{property:Value}
4.ID选择器
id属性值在文档中最好不能重复
#idvalue{property:Value}
ID选择器比类选择器具有更高的优先级
组合选择器
将标记选择器和类选择器组合
将标记选择器和ID选择器组合
继承选择器
子标记在没有定义的情况下所有的样式是父标记的。
要修改子标记需按照文档书的逻辑编写
一个声明设置所有的边框属性。border-width border-style border-color # 后2个可互换顺序
.tets span img{border:1px blue solid;} # 一个声明设置所有的边框属性。
border-style:dotted solid double dashed; 点状 实线 双线 虚线；顺时针方向设置，从方向上开始
div span img{border:1px blue solide;}
伪类：
伪类定义的CSS样式并不是作用在标记上的，而是作用在标记的状态上。很多浏览器支持不同类型的伪类(反着说就是伪类有可能在浏览器中不起作用)
常用的超链接的伪类(其他伪类遇到在补充)
:link(:前可以是标记，属性等反正就是个能代表路径的东西)未访问超链接
：vistited已访问
:hover鼠标停留
:active激活
还有些不了解的选择器
属性选择器，结构伪类选择器，UI选择器
CSS字体与段落属性
字体属性：
{font:family:name}name是字体的名称，**可写多种字体**,按顺序排列，以逗号隔开，若字体名称包含空格，则应用引号括起
字号：
{font-size:10px}定义字体大小为10像素。此外还可以通过其他属性值定义字母的大小。如xx-small(最小),x-small,small,medium(正常),large(大)x-large等
继承属性：(很多属性都可以用它来继承)
inherit继承
字体风格：
{font-style:normal|italic|oblique|inherit}分别是默认；斜体；倾斜；继承
加粗字体：
{font-weight:100-900|bold|bolder|lighter|normal}浏览器默认字体粗细是400
小写转大写字母：
{font-variant:normal|small-caps|inherit}分别是默认|小型大写字体|继承
font属性一次性使用多个属性：
{font:font-size font-variant font-weight font-size font-family}注意：font-size font-family的顺序不可更改，就是说font-size必须在font-family之前
字体颜色：
{color:red|#ff0000|rgb(255,0,0)}分别是：颜色名称|十六进制的颜色|rgb代码的颜色
阴影文本：
{text-shadow:length length opacity color} 也可不用全部写
分别是：水平位移可取正负，垂直位移可取正负；阴影模糊半径（可选）不可为负数；阴影颜色
溢出文本处理：
{text-overflow:clip|ellipsis}分别是：不显示省略标记作简单的裁剪；当对象文本溢出时显示省略标记...
控制换行
{word-wrap:normal|break_work}分别是：允许内容顶开指定的边界；内容将在边界内换行
注意：break_work属性只控制是否断词，二人不是断字符。（对长的英文字符串起不了作用）
保持字体尺寸不变
{font-size-adjust:none|number}分别是：默认值，允许字体序列每一个字体遵循自己的尺寸；为字体序列中所有字体强迫指定同一尺寸。
设置单词间隔（不包括中文）
{word-spacing:normal|length}分别是：默认；定义单词之间的固定间隔
设置字符间隔
{letter-spacing:normal|length}分别是：默认|由浮点数和单位标识符组成的长度值，可为负值，正值
文字修饰
{text-decoration:none|underline|overeline|line-through}默认值|下面线|上面线|删除线|
垂直对齐方式
{vertical-align:baseline|sub|supper|Top|text-top|middle|bottom|text-bottom|+-数字%}分别是：默认值|垂直对齐文本的下标|对其文本的上标|把元素的顶端与行中最高元素的对齐|放置在父元素的中部
文本转换（仅作用于字母型文本）
{text-transform:none|Capitalize|uppercase|lowercase}无转换发生|将每个单词的第一个字母转换成大写|转换成大写|转换成小写
水平对齐方式
{text-align:start|end|left|right|center|justify|
start和end属性主要针对行内元素的，而
文本缩进
{text-indent:length}百分比数字或浮点数字和单位标识组成的长度值(如30mm)
文本行高
{line-height:normal|length}默认|百分比数字，可以允许为负值
处理空白
{white-space:normal|pre|nowrap|pre-wrap|pre-line}默认|空白会被浏览器保留|文本不会换行，文本会在同一行继续知道遇到
标记|保留空白序列，但是正常换行|合并空白序列，但是保留换行符（若文本居中，则这个属性会让其左对齐）
文本反排
{Unicode-bidi:normal|bidi-override|embed}默认|为下面的属性direction服务|元素打开一个额外的嵌入级别
{direction:lrt | rtl | inherit}文本流从左到右|从右到左|文本流的值不可继承
CSS3美化表格和表单样式
表格边框border>0时显示边框，=0时，则不显示边框；边框显示后，可以使用CSS3的border属性及衍生属性和border-collapse属性对边框进行修饰。
表格边框可用来界定不同单元格的数据
{border-collapse:separate|collapse}默认值边框被分开|合并边框
表格边框宽度
{border-width:6px}其衍生属性有:border-top-width;boder-left-width
表格边框颜色
{background-color:red}
表格边框线条
{boder:dotted solid double dashed}点状 实线 双线 虚线；顺时针方向设置，从方向上开始
美化表单中的元素
<form>、<input>、<textarea>、<select>、<option>
美化提交按钮
<input type="submit" value=""class="">
美化下拉菜单
<select name="" id="" ><option value=""></option></select>
CSS3美化图片
css3可以定义多张图片的各种属性，如图片边框border，图片缩放wdith,height。
max-width,max-height设置图片宽度最大值和高度最大值；可写一个，另一个会按照比例进行缩放
img图片属性本身没有对齐的属性，需要使用CSS继承父标记中的text-align（横向对齐）；Vertical-align(纵向对齐)
文字环绕
{float:none|left|right}默认值|文本流向对象的右边|文本流向对象的作边（均是作用在图片上）
网页的定位与布局
定位属性
position|left|right|top|bottom|z-index|width|height|overthow|clip
定义位置|指定元素横向距左部位置|指定元素距右部位置|纵向距顶部位置|纵向距底部位置|设置元素的层叠顺序|元素宽度|元素高度|元素溢出控制|剪切
可以将每个元素都认为包含在一个矩形框内，成为元素框。而元素内容与元素框共同形成了元素块。
定位：就是定位元素块位置和大小
前6个属性是实际的定位属性，后面4个属性是用来设置元素框，或对元素框中的内容进行控制，position属性是最主要的定位属性,left,right,top和bottom只在position属性中使用才会发挥作用。
{position:static|absolute|fixed|relative}分别是默认值|绝对定位|绝对定位相当于浏览器窗口进行定位|相对定位，对象不可重叠
absolute是参照浏览器的左上角，配合top，left，bottom和right进行定位的。在父层position属性为默认值时，上、下、左、右的坐标原点以body的坐标原点为起始位置。
当然在定位时，最好使用
相对定位
relative：坐标原点本身偏移前的原点，与上级元素无关。
固定定位
fixed:参照位置是浏览器窗口，而不是上级元素。所以可以使用固定定位来设置类似传统框架样式窗口，广告框架，导航框架等。
层叠顺序
{z-index:zuto|number}遵循父对象的定位|无单位的整数值可以为负值，该属性只作用于position的属性值为relative或absolute的对象，不能作用在窗口组件上
边偏移属性
left、right、top和bottom
描述元素块与包含元素块最近的边线之间的偏移量的属性；
4个属性取值很相似:
{left:auto|length}系统自动取值|由浮点数字和单位标识符组成的长度值或百分数（设置数值用来设置元素的绝对位置，百分比设置元素是相对于其他上级元素的位置而设置的；取值为auto，则在定位中允许元素刚好有显示其内容所需的宽度和高度。)
浮动定位
{float:none|left|right}不浮动，在左面，在右面
float会对相邻内容造成影响，也可实现内容环绕图片的效果
清除浮动元素
{clear:none|left|right|both}两边都可以有浮动元素|不允许左边有浮动元素|不允许右边有浮动元素|不允许有浮动对象
这个可以清除float带来的影响
溢出定位：
{overflow:visible|auto|hidden|scroll}溢出内容可见|等同于scroll，需要时应用滚动条|内容隐藏|保持元素框大小，在框内应用滚动条
隐藏定位
{visbility:inherit|visible|collapse|hiden}继承|可见|隐藏元素的行列，隐藏的行或列能够被其他内容使用|元素隐藏(元素不可见，但他仍旧会占有部分页面位置，影响页面的布局)
块和行内元素display
通过display属性控制元素显示，即元素显示方式
{display:block|none|inline|等等}指定对象为块元素|隐藏|指定对象为内联元素
display属性的默认值为block,即元素的默认显示方式是以块元素方式显示。常用的段落p,标题h1、表单form、列表、ul,li都可以定义成块元素。一个块元素其行高和顶部和底部都是可控的。如果不设置密度，快就会默认为整个容器的100%，如果设置了值，显示大小就由值来决定。
行内元素：
当display的值被设置为inline时,可以把元素设置为行内元素，并在浏览器中同一行显示。
CSS3盒子和DIV布局
层在HTML布局应用
div和span的区别：div是一个块级元素，其包含的元素会自动换行。span标记是个行内标记，其前后都不会发生和换行。div标记可以包含span标记元素，但span标记一般不包含div标记。
盒子模型是由margin（边界）、border（边框）、padding（外边界据文字的距离）、content(内容)
margin:外边距：用来设置内容与内容之间的距离
border:设置内容边框
padding:设置内容和边框的距离
content:文字和图片等
CSS3盒子新增弹性盒子模型
该模型绝对元素在盒子中的分布方式以及如何处理盒子的可用空间。但一般都需要浏览器的私有属性来支持弹性盒子模型。
定义盒子的坐标轴
{box-orient:horizontal|vertical|inline-axis|block-axis|inherit}在一条水平线上显示|在一条垂直线上显示|沿着内联轴显示|沿着块轴显示
定义盒子的显示顺序
{box-direction:normal|reverse|inherit}正常显示|反向显示
定义元素在盒子内的显示顺序
{box-ordinal-group:
子元素在盒子中的显示空间
{box-flex:
子元素在盒子内水平孔吉纳的分配
{box-pack:start|end|center|justify}左侧，右侧为空|右侧，左侧为空|全局居中|平均分布
子元素在盒子内竖直空间的分配
{box-align:start|end|center|baseline|stretch}顶部|底部|居中|沿基线排列，富余的空间可前后显示|所以子容器和父容器保持同一高度
空间溢出管理
{box-lines:single|multiple}单行单列显示|子元素多行多列显示
CSS3+DIV页面基本排版
- 将页面用DIV分块
- 设置各块的位置
- 利用CSS对DIV进行定位
固定宽度布局
经典的网页排版方式：包括宽度固定的上中下版式，宽度固定的左右版式，自适应宽度布局和浮动布局。
新增CSS3多列布局
列宽度
{column-width:[
列数
{column-count:auto|
列间距
{colume-gap:normal|
列边框样式
{colume-gap:normal|
