css概念:
cascading style sheet级联样式表,用于html文档中样式定义
html中引入css的好处:
各元素使用统一的样式声明,提高了可重用性可维护性
bordercolor font已经弃用
除非是html特有的属性,否则都用css来做
定义css方式
1内联 直观,不能重用,不便于维护,没有实现结构与样式分离,优先级最高
2内部样式 可以重用,没有真的实现结构与样式相分离。type=text/css 含义:这是个文本,文本是css
3外部样式 实现了结构与样式分离 <link rel="stylesheet"type="text/css"href="1.css"/>rel关系.
注释/* */
css样式表特性
继承,层叠,优先级(浏览器缺省<外部,内部,就近,子元素大于父元素<内联)
就近优先原则 内联>内部,外部 从上到下解析定义近的优先
!important优先级最高
css选择器
常用的颜色:purple(紫色),pink(粉色),silver(灰色)
一*和在body里面定义不一样
*通用选择器,写在*里的样式会给页面中所有的元素都用一遍,会降低css效率,慎用
二标签选择器
三类选择器 1.类名规则 不能中文,不能用数字开头,不能是纯数字 2.可以在页面中反复多次调用 3. 多类 空格 (低版本IE不支持)4. p.blue
四id选择器 1.id名规范不能数字开头,不能是中文,不能是纯数字,不能重复
(元素选择器<类选择器<id选择器)
复合选择器
五群组选择器,
六后代选择器&amp;nbsp;
七子代选择器>
八伪类选择器
链接伪类(链接a专用) :link :visited
动态伪类:hover :active :focus,低版本ie不支持除了a之外的hover
选择器优先级权值(权值相同的话,后定义的优先)但是10个标签,也底不过一个类。
css样式规则
1.尺寸单位:
% 子元素占父元素的百分比
pt磅 9pt相当于12像素,正文里的字
px 计算机屏幕上的一个点14px正文中常用的像素,(坏点:亮点,暗点)
em当前字体的倍数
in cm mm英寸 厘米 毫米一般不用
宽度属性
width
min-width(百分比的时候可以定义变化范围,手机端和网页端的自适应布局;textarea,不能调大小的话min和max相同)
max-width
高度属性
height
max-height
min-height
可以设置尺寸元素的元素:块元素,自带宽高属性的元素:img,input
2.颜色单位:
RGB:屏幕显示的内容,颜色模式都是rgb,色光三原色
发射的光
色彩三原色
吸收之后反射的光
rgb(x,x,x)255 255 0 黄色
rgb(x%,x%,x%)
#rgb:简写的16进制数
表示颜色的单词r=g=b灰色,数值越大越是浅灰色
#ffffff 白光 #000000黑光
#336699深蓝色
#339966发蓝的绿色
#669933偏黄的绿色
简写
#aabbcc=#abc
关键字
gray深灰 silver浅灰
3溢出
中文会自动换行overflow溢出 visible hidden scroll auto(需要滚动条就显示,不需要就不显示)
overflow-x横向
overflow-y纵向
border border-radius 如果定义多个值,从左上角开始顺时针转一圈
.current border #e4393c(京东红)
4边框:
边框border:width style(solid dashed dotted) color
border-left right bottom top
边框倒角border-radius:从左上角开始顺时针转一圈,如果哪个没定义则和他的对角线一样。
边框阴影:box-shadow 取值为必需属性: h-shadow v-shadow 可选属性:blur模糊 spread扩展 color颜色inset内部阴影
浏览器按顺序向后识别
阴影的默认颜色和框的字体颜色相同
图片边框:border-image url() 26 stretch(拉伸) round(无残角)repeat(重复)
9宫格切片,顶点不重复,切片的大小是26像素
用的比较少,ie8不兼容
轮廓:outline定义方式和border一样 去掉chrome input框默认的蓝边
框模型
背景
小知识
css代码优化
div .blue选择器筛选是从右向左的顺序
所以id选择器前面不要加东西,效率太低
元素加类 元素加id效率比较低
id加类 稍微高
后代和子代效率比较低