Summary—【base】(CSS)
CSS知识点
1. CSS又被称为层叠样式表
2. CSS在html中的语法
a)
<style> 选择器{键:值;} </style>
b) css中最后一个键值可以不写分号
3. CSS中对字体设置的常用属性
a) Font-size
i. Font-size是设置字体的大小的
ii. Font-size:12px;(单位px)
b) Font-style
i. Font-style是设置字体风格的
ii. 斜体font-style:italic; 正常 font-style:normal;
c) Font-weight
i. Font-weight是设置字体的粗细的
ii. 可以用数值来表示如 font-weight:400;（100~900）
iii. 可以用关键字来表示 font-weight:bold;( bold:加粗 bolder:更粗 lighter:细线)
d) Font-family
i. Font-family设置字体的样式的
ii. Font-family:”宋体”;如果字体样式是中文则要加上双引号,如果是英文可以省略
e) Font简写
i. 简写的顺序为font:font-style font-weight font-size font-family;（这是一定要写的）
4. CSS中对文本设置的常用属性
a) Text-align
i. Text-align是用来设置文本的水平位置的
ii. Text-align:center;(center居中,left靠左,right靠右)
b) Text-indent
i. Text-indent是用来设置默认的文本缩进的
ii. Text-indent:2em;(单位:em)
c) Text-decoration
i. Text-decoration是设置文本的样式的
ii. Text-decoration:none;(无样式:none,下划线:underline,上划线:overline,删除线:line-through)
5. 开发人员工具的使用
a) 打开:在浏览器中右键->审查元素
b) 功能
i. 查看network:用来查看浏览器请求服务器时发送的请求报文
ii. 查看elements左侧代码区用来查看某一元素所使用的标签,所占用的区域
iii. 在elements右侧区域可以查看某一元素所使用的CSS样式
7. CSS注释
a) Css注释以/*开始 以*/结束
b) Css中的注释不可以叠加使用
8. Css中的选择器
a) 选择器的命名规则
i. 只能使用数字,字母,下划线”_”和连接符”-”来组合进行命名
ii. 并且命名不可以以数字和_开头
b) 标签选择器(tag)
i. P{键:值;}
ii. 为页面上所有的这一种标签设置对应的属性
c) 类选择器(class)
i. .class{键:值;}
ii. 给页面上所有有这个类名的标签设置对应的属性
d) ID选择器(id)
i. #ID{键:值;}
ii. 给页面上所有的ID名的标签设置对应的属性
e) 通配符选择器(*)
i. *{键:值;}
ii. 给页面中的所有标签设置对应的属性(不推荐使用)
f) 后代选择器
i. #id .class{键:值;}
ii. 对所有此类ID下的所有此类class设置样式
g) 子代选择器
i. #id>.class{键:值;}
ii. 对所有此类ID下没有被标签包裹的此类class设置样式
h) 并集选择器
i. #id,.class{键:值;}
ii. 对所有此类ID和此类class下的标签设置样式
i) 交集选择器
i. #id.class{键:值;}
ii. 对所有既是此类ID又是此类class的标签设置样式
9. CSS的3种使用方式
a) 在style标签中进行设置
i.
<style> .class{键:值;} </style>
b) 在标签中设置style属性进行设置
i. <div style=”键:值;”></div>
c) 在外部设置CSS样式用link导入
1 <link rel="stylesheet" href="a.css">
10. 颜色的3中表达方式
a) 用关键字进行表达 Color:rad;
b) 用十六进制进行表达 Color:#FFF;
c) 用RGB()进行表达 Color:RGB(100,100,255);
 |
|
11. CSS的三大特性
a) 继承性 – html中的标签会继承父级标签
i. a标签不会继承父元素的颜色
ii. h标签不会继承父元素的字体大小
iii. div的宽会继承父元素的宽,div的高不会继承父元素的高
b) 层叠性 – 类选择器与标签选择器同时作用于同一元素的同一属性,那么类选择器所设置的属性样式会层叠标签选择器的属性样式(最后会显示类选择器所设置的属性样式)
c) 优先级
i. 选择器优先级权重: 浏览器中的默认样式<继承样式<通配符选择器<标签选择器<ID选择器<标签中直接用style属性设置CSS样式<!important
ii. 相同的选择器,相同的属性最后设置的样式会覆盖前面所设置的样式
iii. 权重格式(！important的个数，ID选择器的个数，类选择器的个数，标签选择器的个数)从右到左对比标签,直到分出权重高低,如果权重相同则由CSS设置的顺序决定
12. CSS中背景的设置background
a) 设置背景的颜色background-color
i. Background-color:red;
b) 设置背景的图片background-image
i. Background-image:URL(image/1.jpg);
c) 设置背景图片的平铺方式background-repeat
i. Background-repeat:no-repeat; 设置为不平铺
ii. Background-repeat:repeat-x; 设置为水平平铺
iii. Background-repent:repeat-y; 设置为横向平铺
d) 设置图片在标签中的位置background-position
i. Background-position:top bottom; 设置图片的位置(top表示偏上,right表示偏左,bottom表示偏下,left表示偏左)
ii. Background-position:100px 100px; 设置图片的具体位置(x轴位置,Y轴位置)
e) 连写background
i. 连写顺序 - background:background-color background-image background-repeat background-position;
13. 块级元素与行内元素
a) 块级元素
i. 特点:无论是否设置宽高都独占一行
ii. 显示方式:display:block
iii. 例:DIV标签
b) 行内元素
i. 特点:宽和高由其中的内容决定,设置宽高不会起作用
ii. 显示方式:display:inline
iii. 例:span标签
c) 行内块级元素
i. 特点:不会独占一行,也可以设置宽和高
ii. 显示方式:display:inline-block;
d) 改变显示方式display
i. Display:block;(block:块级元素,inline:行内元素,inline-block:行内块级元素)
14. Css中对文本的相关样式
a) Text-align用于设置文本在水平方向上的排序方式
i. Text-align:center设置文本水平居中显示
ii. Text-align:left 设置文本水平靠左显示
iii. Text-align:right 设置文本水平靠右显示
b) Text-decoration:用于设置文本的显示样式
i. Text-decoration:none;取消文本原先所有的样式
ii. Text-decoration:underline 为文本增加一条下划线
iii. Text-decoration:overline 为文本上方增加一条线
iv. Text-decoration:line-through 为文本增加一条删除线
c) Text-indent用于设置文本的缩进
i. Text-indent：2em
15. CSS的三种使用方式
a) 定义行内样式
i. <div style=”color:red;”>
b) 嵌入样式(内联样式)
i.
1 <style> 2 3 Div{color:red;} 4 5 </style>
c) 外部样式（外联样式）
<link rel="style/sheet" href="外部样式.css">
16. 行高line-height
a) 两行文本之间的基线之间的距离叫做行高
b) Line-height的作用是设置文本的行高(上下文本的间距),一般应用于使文本垂直居中于容器中
c) 单位
i. Px：像素单位
ii. %:基数以当前标签中的文本字体大小为主
iii. Em效果与%类似
iv. 没有单位
如果不涉及到继承那么和em、%一样,如果涉及到继承,则会直接继承line-height给子元素,而%和em会继承一个具体的数值给子元素
17. 伪类
a) 作用:伪类选择器是给对应的标签设置样式的,但是伪类需要某些特定的效果才会触发
b) 伪类的种类
i. Link 设置元素没有被访问过的样式
ii. Visited 设置元素被点击之后的样式
iii. Hover 设置鼠标悬停时元素的样式
iv. Active 设置鼠标激活时的样式
18. 盒子的组成
a) Padding:
i. 是盒子与内容之间的空隙,能够分别设置padding-top，padding-left, padding-right，padding-bottom,要注意的是行内元素不能设置padding
b) Border
i. 是设置盒子外边框的属性,分别能够设置border-width,border-style,border-color
ii. Border-width是设置盒子外边框的宽度,分别能够设置border-width-top, border-left, border-right, border-bottom
iii. Border-style是设置盒子外边框的样式可以设置dashed-虚线|dotted-点线|solid-实线,也能够分别设置
iv. Margin是设置盒子与盒子之间的空隙的可以设置margin-top margin-right margin-bottom margin-left
Margin的连写:margin:100px; 设置margin的上下左右
Margin：100px 100px;设置margin上下、左右
Margin：100px 100px 100px;设置margin上、左右、下
Margin：100px 100px 100px 100px设置margin上,下,左、右
19. Css中的浮动
a) 浮动的特性
i. 浮动是一种脱离了标准文档流的技术.浮动之后的元素在排序的时候会以上对齐,文字会给浮动的元素让位.
ii. 浮动后的元素会覆盖在标准流的元素之上
iii. 浮动的位置基准,以自己没有脱离标准流之前的位置,向上浮动
iv. 浮动之后元素的显示方式将会改变为inline-block
v. 浮动可以设置float:left和float:right,如果在同一位置浮动的元素有多个,那么左浮动的元素会寻找左浮动的元素,右浮动会寻找右浮动的元素
b) 取消浮动
i. 浮动的标签父元素下增加一个额外的标签来清除浮动,并增加一个样式,但清除完成后,父容器的高度还是0
Clear:both;//不推荐使用
ii. 浮动的标签父元素中增加一个样式
Overflow:hidden;//不推荐使用
iii. 使用伪元素//主流清除浮动的方法
1 .clearfix:after { 2 content:""; 3 height:0; 4 line-height:0; 5 display:block; 6 visibility:hidden; 7 clear:both; 8 } // 该方法清除伪元素对IE不兼容所以应该加入一个样式zoom:1;
iv. 使用双伪元素:
1 .clearfix:after , .clearfix:before { 2 content:””; 3 display: table; 4 clear:both; 5 }
20. 定位
a) 静态定位: position:static;
一般不使用,所有标准文档流中的标签使用的都是静态定位
b) 相对定位: position:relative;;
相对于当前位置进行定位,不会破坏其他元素的位置,标签本身所占的位置不会消失
c) 绝对定位: position: absolute;
i. 相对于body位置进行定位,如果父元素设置了定位的话将相对于父元素进行定位
d) 固定定位position:fixed
i. 固定在浏览器的某一个位置,不会随着浏览器的位置变化而移动
e) Z-index层
i. 用来设置当前盒子所在的层次,层次越高,显示的优先级越高
21. Css中页面元素的显示和隐藏
a) Overflow:hidden将超出的部分隐藏起来,但是会占用页面的位置
b) Display:none 将元素直接隐藏,不会占据页面的位置
22. Overflow的使用
a) 属性为hidden:将超出容器的部分隐藏起来
b) 属性为scroll:将超出容器的部分放在滚动条之内
c) 属性为auto如果内容超出容器的部分放到滚动条内如果不超出容器,则不出现滚动条
23. 图片和文字的居中:
a) Vertical-align:middle
b) Display:inline-block
24. 精灵图
a) 多个图片叠加在一起成为精灵图,通常与background-position结合使用
b) 精灵图不宜过大
c) 一般精灵图大小要大于最宽的背景
d) 背景图片之间必须有空隙
e) 精灵底侧有一些空隙,方便以后添加
25. 滑动门
a) 第一个版本的滑动门是由3个标签和3个背景图片组成
b) 常用的滑动门是由2个标签和2个背景图片组成的,一般由精灵图组合制作滑动门
26. 圣杯布局
a) 由3个div组成的,两边的div固定不动,中间的div会随着页面的大小而变化
27. 页面编写的注意点
a) 通栏:占一整行的盒子
b) 版心:页面的安全范围,一般要大于最小分辨率
c) 开发整站的2种方式:
i. 从上往下依次把盒子写完
ii. 先把整站布局写好,然而再填充元素
常用的html标签和css样式
Html标签
|
Html标签 |
标签说明 |
|
h1~h3 |
H系列标签,最常用的是前3个,h1常用于网页logo,常配合text-intent样式使用，H2和h3便签常用于写网页中加粗的标题 |
|
Ul>li |
Ul系列标签,无序列表，常用于没有明确顺序的导航(或没有顺序的列表)，其中的li标签常与list-style样式和float样式一起使用 |
|
Strong |
Strong标签,常用网页中某些重点文本进行加重语义 |
|
Em |
Em标签,常用于网页段落某些重点词句进行语气加重. |
|
Meta |
优化网站SEO,每个页面不推荐使用太多,也不推荐不适用,常与keywords和description一起使用 |
|
Div |
用于网页布局 |
|
Span |
用于辅助div进行网页布局 |
|
A标签 |
常用于导航栏和超链接,常与li标签使用,也常单独使用 |
|
Link |
Link标签常用来设置网页logo和导入css |
|
Script |
Script标签常用来导入外部js |
CSS样式
|
CSS样式 |
样式说明 |
|
Width |
宽,该样式可以设置块级元素和行内块级元素的宽 |
|
Hight |
高,该样式可以设置块级元素和行内块级元素的高 |
|
Color |
前景色,设置元素的前景色(文本颜色) |
|
Font系列 |
Font系列常用样式有 Font-size/line-hight 字体大小,设置字体的大小/设置行高 Font-style设置文本正常/倾斜,常用:正常normal/倾斜 italic Font-weight设置文本中字体的粗细 常用100~900或正常normal/粗体bold/更粗的bolder/细的 lighter Font-family设置文本的字体 常用宋体,黑体,雅黑等. |
|
Background系列 |
Background系列中常用的样式有 Background-color 设置元素的背景色 Background-image 设置元素的背景图片 Background-repeat 设置元素的平铺 常用 不平铺no-repeat/水平平铺 repeat-x/垂直平铺repeat-y Background-position 设置背景图片的显示位置 常用方位名词 top、bottom、left、right、center/设置具体的像素值 x轴位置、y轴位置 |
|
Text-indent |
设置了文本缩进,常用于对段落进行缩进,常用em作为单位，但也可以使用px作为单位 |
|
Text-align |
设置文本的在水平位置的显示,靠左显示:left/靠右显示:right/居中显示:center |
|
|
|
|
Text-spacing |
设置文本中每个字的字距[老师没讲但是也比较常用]，常用单位em，也可以使用px作为单位 |
|
Text-decoration |
该样式可以为文本添加装饰 无效果 none/下划线 underline/上划线overline/中心线 line-through 其中blink已经废弃不能使用 该属性支持对一个文本进行多个装饰,写法如下 Text-decoration:underline overline;//添加上划线和下划线 |
|
Padding |
设置盒子的内边距,比较常用 |
|
Border |
设置盒子的边框,其中有3个属性 Border-width 盒子边框的粗细 Border-color 盒子边框的颜色 Border-style 盒子边框的样式分别为 无边框none/点状边框dotted/虚线边框 dashed/实线边框 solid/双线边框double |
|
Margin |
设置盒子的外边距(盒子与盒子之间的距离) 可以用margin: 0 auto;来居中div |
|
Float |
能让元素脱离标准流,进行浮动,常用于排版和导航的制作 有左浮动left和右浮动right2种 |
|
List-style |
一般用于取消列表(常用于li标签)的默认效果(内容前的黑点) |
|
position |
能够设置元素的定位方式 静态定位Static(标准流中的定位方式)/相对定位relative/绝对定位absolute/固定定位fixed |
|
Display |
更改元素的显示方式 设置为块级元素Display:block/设置为行内元素display:inline/设置为行内块级元素display:inline-block； |
|
min-width |
设置元素的最小宽度 |
|
min-hight |
设置元素的最小高度 |
|
Visibility |
设置隐藏元素visibility:hidden |
|
overflow |
用来阻止/隐藏元素溢出的 不阻止visible/内容修剪hidden（溢出部分不可见）/内容修剪并创建滚动条 scroll/内容修剪并显示滚动条suto(如果内容没有溢出则没有滚动条) |
|
Z-index |
元素定位之后可以用该样式来设置元素的层叠高度 |
|
待续 |
常用css样式暂时只能想到这么多,大家有想到这里没有的可以告诉我下,谢谢 |
伪类
|
常用伪类 |
伪类说明 |
|
:link |
应用于未被访问的连接.常用于A标签/这个伪类IE6不兼容 |
|
:visited |
获取焦点时所显示的样式 |
|
:hover |
常用伪类,鼠标指针悬停时所显示的样式 |
|
:active |
应用于被激活的元素，常用于A标签 |
|
:focus |
将样式添加到被选中的元素 |
2个常用伪元素
|
常用伪元素 |
伪元素说明 |
|
:before |
在元素前插入内容 |
|
:after |
在元素后插入内容 |
