CSS.docx
《CSS.docx》由会员分享，可在线阅读，更多相关《CSS.docx（14页珍藏版）》请在冰豆网上搜索。
CSS
Css
CSS层叠样式表cascadingstylesheet的缩写
1.css的主要作用：
增强控制网页样式并允许样式信息与网页内容分离的一种标记性语言
2.CSS不需要编译，可直接由浏览器执行（属于浏览器解释型语言）
3.CSS3是目前被使用最广泛的版本，但是部分新特性尚未能得到支持。
4.CSS的基本语法：
Css的定义分别由：
选择符、属性、属性取值组成
格式：
#one{color:
red}
Css大小写不敏感、推荐使用小写
属性和值之间用冒号分开、多个属性之间用分号隔开
注意：
都是英文的符号
Css中的注释：
/*CSS注释的内容*/
注意：
CSS中注释不允许再次嵌套注释，从注释的开始找到离它最近的结束为止。
5.在HTML文档中放置CSS的几种方式
a）内联样式表行内引用
i.
特点：
内联的样式比其他方法更灵活。
但是需要和展示的内容混在一起，内联样式表会失去一些样式表的有点。
（样式和内容分离）
B）内嵌样式内部引用
特点：
适合用于一个HTML文档具有独一无二的样式时
C）外部链接样式表外部引用
响应式布局中常用语此方式链接CSS文件
特点：
CSS外部引用使用了外接的CSS文件，一般的浏览器都有缓存的功能，所以用户不用每次下载此CSS文件，。
并且外部引用相对于内部和内联来说高效的是节省带宽、外部引用时间W3C推荐使用的。
多重样式表的叠加
依照后定义的优先，所以优先级最高的是内联样式表，内嵌和外部样式表之间是最后定义的优先级高
总结一句话：
谁离内容最近，谁的优先级就高。
1.选择器：
a）基本选择器
层级选择器
属性选择器
结构性伪类选择器
其他选择器
1.基本选择器
a）.Class类选择器
i.注意。
Class属性中如果要命名多个名字，使用空格分隔符分隔开。
b）#id唯一选择器或者叫ID选择器
i.注意。
当前页面中允许使用id属性在多个标签中定义同一个名字，这是这些标签会具有同一个样式，但是不允许在当前id属性中期多个名字。
*通配符匹配所有的HTML标签
tagName标签选择器
在CSS中可以直接使用标签名当选择器
注意：
如果使用标签选择器，那么在这个页面中出现的该标签都需要该属性。
2.层级选择器
a）P,b组合选择器表示选择所有的p标签和b标签
b）Pi包含式选择器表示p标签里面的I标签
c）P>i选择所有作为P标签的子元素i标签
d）P+i选择紧贴在P标签之后的I标签
e）P~i选择p元素后面的所有兄弟元素i
3.属性选择器
a）属性选择器就是根据属性名或是属性值来找到元素。
E:
Element标签元素的意思ATT：
Attribute属性VALvalue值
E[ATT]匹配所有就有ATT属性的E元素，不考虑属性值。
P[title]
注意：
如果把元素去掉，表示匹配所有具有ATT属性的元素。
E[ATT=VAL]匹配所有ATT属性等于VAL的E元素
E[ATT~=VAL]匹配所有att属性具有多个空格分隔的值，其中一个值等于val的E元素。
E[att|=val]匹配所有ATT属性具有多个连接分隔符（-）的值，。
其中一个值以val-开头的E元素.
注意：
一般情况下不用。
主要用于lang属性，比如‘en’,’zh-en’,’en-us’,’en-gb’;
Css3中用到的属性选择器
E[att^=val]属性att的值以VAL开头的E元素
E[att$=val]属性att的值以val结尾的E元素
E[att*=val]属性ATT的值包含val字符的E元素
4.CSS3结构性伪类选择器
1.伪元素选择器：
不是对真正的元素选择器
E:
First-lineE元素的第一行
E:
first-letterE元素的第一个字母
E:
before{content:
}E元素的内容之前
E:
after{contentr:
}E元素的内容之后
注意：
如果要使用before或者after必须配合content（内容）属性使用。
2,结构性伪类选择器
在CSS中引入的结构性伪类选择器的共同特征是允许开发者根据文档数中的结构来指定元素的样式
1.四个最基本的结构性伪类选择器
a）:
root将样式绑定到页面的根元素：
b）所谓的根：
就是位于文档树中最顶层结构的元素、在HTML页面中就是指着包含整个页面的HTML部分
E:
not（）对某个结构元素使用样式，但是想排除这个元素下的子元素，就使用not样式（除了某一个元素）
E:
empty所有为空的E元素
E:
target代表目标也就是连接到目标时
2.其他得伪类选择器
a）E:
first-child对父元素中的第一个子元素E指定样式
b）E:
last-child对父元素中的最后一个子元素指定样式
c）E:
nth-child（n）对指定需要的子元素E设置样式（正序）
i.（odd）所有正序下来的第奇数个子元素
ii.（even）所有正序下来的第偶数个子元素
E:
nth-last-child（n）对指定需要的子元素E设置样式（倒叙）
Odd所有倒叙上去的第奇数个子元素
Even所有倒叙上去的第偶数个子元素
E:
nth-of-type（n）与nth-child（）作用类似。
但是仅匹配使用同种标签的元素。
E:
nth-last-of-type（n）与nth-last-child（）作用类似。
但是仅匹配使用同种标签的元素
E:
nth-child（an+b）;
A表示每次循环中间隔多少个。
B表示循环样式的开始位置。
E:
only-child匹配父元素下仅有一个子元素，并且子元素为E的元素。
E:
only-of-type匹配父元素下使用同种标签的唯一一个子元素E
E:
enabled匹配表单中激活的元素
E:
disabled匹配表单中禁用的元素
E:
checked匹配表单中被选中的radio或者checkbox元素
:
:
selection匹配用户当前选中的元素
伪类选择器：
是定义好的，不能随便起名，是为了固定在某个元素在不同状态上定义的，目前就a标签上有几种状态。
：
link设置超级连接a在未被访问前的样式。
:
visited设置超级连接a在其地址已被访问的样式
:
hover设置元素在鼠标悬停时的样式
:
active设置元素在被用户激活（在鼠标点击与释放之间）时的样式
作业：
鼠标移动到表格的行中变化行的背景颜色background-color:
预习：
字体属性背景属性尺寸属性列表属性
今日课堂代码3遍。
CSS常用的属性：
字体属性：
Font-style设置字体样式正常或者斜体
Normal正常字体
Italic斜体
Font-family用于设置字体的族科
注意：
页面中该属性设置的字体必须存在于客户端的电脑中才可以使用。
也可以同时设置多个字体，号分开。
那么会从左到右的顺序挨个去找，找到那个字体就用哪个字体。
Font-size:
设置字体的大小
常见得单位
Px像素
响应式布局会常用的
Em一个汉字的大小
Ex就是一个X字符的大小
换算：
1em=2ex;（相对单位）
注意：
在CSS中通常情况下设置值都需要单位，尤其长度。
Font-weight:
设置字体的粗细
属性值：
Bold粗
默认值：
normal
数字格式一般使用800
实际数字格式600到900是粗体
100到500是细体
Font-variant设置字体为小型的大写字母
Normal正常字体
Small-caps将小写字母变为小型大写字母
Font字体样式统一设置标签：
注意：
使用该属性值，值具有顺序关系，必须依照顺序来写，不存在可以省略
Font属性顺序
斜体/小型大写字母/粗体/（字体大小/行高）/字体族科
推荐：
推荐使用单个设置，不推荐使用统一设置标签，因为具有顺序关系，不好用。
Color设置字体颜色
颜色取值：
英文单词
十六进制
Rgb（）;
注意：
在设置字体颜色时，一定要找到离字体最近的标签。
文本属性：
Text-indent:
首行缩进
常用的单位：
em一般情况缩进2em相当于2个汉字的大小。
Line-height:
用于设置单行文本的行高，所谓的行高就是一行的高度
1.设置行高可以美化效果
2.用于单行文本的垂直居中设置
Text-align:
设置元素内容的水平对齐方式
取值：
left居左
Center居中
Right居右
Word-spacing:
设置单词的词间距（对中文无效）
Letter-spacing：
设置字母之间的距离（一个汉字就是一个字母）
介绍一个标签：
div标签：
无意义的块状标签。
块状标签：
独占一行并且具有宽高属性
无意义：
没有任何意思或者说没有任何样式
背景属性：
Background-color:
设置背景颜色
可以使用任何的颜色表示方式（英文/RGB/16进制）
Background-image:
设置背景图片属性
Background-image:
url（要显示背景图片的地址）;
Background-repeat设置背景图片是否重复
Repeat-x水平方向重复
Repeat-y垂直方向重复
Repeat默认值图片延水平方向以及垂直方向重复
No-repeat不重负
Background-position设置背景图片得位置
格式：
background-position:
水平和垂直位置
Background-position:
水平位置垂直位置
水平位置和垂直位置的取值
水平位置英文单词形式：
leftcenterright
垂直位置英文单词形式：
topcenterbottom
长度单位；只要是长度单位即可，一般使用像素
注意：
如果设置为负数，水平方向表示左移动，垂直方向表示向上移动
Background-attachment:
设置背景图片是否随默认滚动而滚动
默认属性：
scroll:
背景图片随内容一起滚定
Fixed:
绑定页面，图片不随页面的滚动而滚动，相当于定位到当前桌面的效果，。
Background:
背景属性的简写方式。
尺寸属性：
宽度width
高度height
最小高度min-height
最大高度max-height
最小宽度min-width
最大宽度max-width
注意：
最小高度属性，当前的高度如果没有达到最小高度，那么高度将设置为最小高度值。
最大高度属性，允许当前元素根据内容自动减小高度，但是如果达到最大高度值，将不再增加高度。
以上这两个属性比较适合页面的排版使用，宽度属性不用。
原因。
设计页面时，禁止页面出现水平滚动条。
可以出现垂直滚动条。
列表属性：
用于设定ul和ol的列表样式
List-style-type:
设定列表的符号样式（固定样式）
常用的值：
none取消列表符号样式
List-type-image:
url（）使用指定的图片来代替列表序号
注意：
如果同时存在image和type.以用户自定义的image图片为主
List-style-position:
设置列表符号需要的位置
Inside在内容中
Outside需要在内容外
列表属性的简写属性：
List-style:
没有顺序的要求。
需要用哪个写哪个。
作业：
课堂代码3遍。
一套练习题
预习：
定位属性，布局属性，浮动属性以及盒子模型
定位属性：
Position:
设置元素的定位方式
Relative相对定位
Absolute绝对定位
Fixed绑定定位到的窗口中。
Static静态定位（默认值）
Relative:
相对定位，以当前元素为参照物移动指定的距离的定位方式。
注意：
元素相对定位以后，占据原有的物理位置。
Absolute:
绝对定位，以其他元素作为参照物移动指定的距离的定位方式。
注意：
元素绝对定位以后，不占据原有的物理位置。
关于绝对定位的参考点：
1.如果该元素的外层元素中没有任意一个元素采用position定位，那么此时定位的参考元素为body或者说页面。
2.如果元素的外层元素是非static（有了除默认值之外的定位设置），那么这个外层元素就成为该元素的定位参考点。
3.如果元素的外层元素没有设置任何的POSITION的值，那么该元素将寻找距离自己最近的其他设定过POSITION的外层元素作为参照物（有个要求：
必须为嵌套关系）
Left:
设置定位元素的水平移动位置（距离左边的距离）
Top:
设置定位元素的垂直移动位置（距离上边的距离）
Right:
设置定位元素的水平移动位置（距离右边的距离）
Bottom:
设置定位元素的垂直移动位置（距离下边的距离）
Z-index:
设定定位元素z轴的距离（元素的显示顺序）
布局属性：
Div块状无意义的标签
特点：
具有宽高属性、并且独占一行
Span:
行内元素
特点：
没有宽高属性，根据元素的内容增加而增大，并且不会独占一行。
Display:
设置元素的显示方式
常用的值：
Inline:
将元素作为行内元素样式显示
Block:
将元素作为一个块状元素显示。
Inline-block:
设定一个元素既可以设定宽高，也可以在一行显示。
None:
设置该元素为不显示状态
Visibility：
设置元素是否显示
Visible显示
Hidden隐藏
注意：
visibility和display:
none的区别：
visibility的隐藏方式仅隐藏内容的显示，其占用的空间依旧占用。
而display的隐藏方式是彻底隐藏该元素的内容和位置。
设定元素内容超出元素宽高的显示方式：
Overflow-x:
设置水平方向的溢出显示
Overflow-y:
设置垂直方向的溢出显示
常用的值：
“
Visible超出部分仍然显示
Scroll:
内容超出高度或者宽度将出现滚动条
Hidden:
超出内容将隐藏处理。
（超出的内容可能被截断）
Overflow：
设置水平方向以及垂直方向的溢出显示
注意：
overflow:
hidden作用1：
设置元素内容水平及垂直方向超出部分隐藏
Float:
浮动属性：
Float:
设置元素的浮动方式
Left:
设置元素向左浮动
Right:
设置元素向右浮动
None:
设置元素不浮动（默认值）
注意:
任何元素一旦使用float属性，那么他的display属性将完全失效，均可以设置宽高，并且不独占一行。
效果类似于inline-block;
Overflow:
hidden作用2：
自动适应高度（浮动里面用）
Clear:
用于清除其他元素浮动属性对当前元素的影响
Left:
清除左浮动，用于抵消float:
left的效果
Both:
清除左右浮动，用于清除所有flaot效果（推荐使用）
作业：
使用浮动做一个计算器的效果。
使用定位和display分别作出两个导航条。
课堂代码：
没有浮动的2遍。
涉及到浮动的页面3遍。
整理课堂笔记
预习盒子模型。
升级会员 