首页 > 代码库 > css-1
css-1
1.css三种书写的方式:嵌入式、外链式、行内式,,其中常用的是外链式 <link rel=”stylesheet” type=”text/css” href=http://www.mamicode.com/”外部CSS文件的地址” />
2.选择器分为
基本选择器,复合选择器,伪类选择器,属性选择器:
基本选择器包括通用选择器、标签选择器、ID选择器、类选择器;(常用)
复合选择器又包括组合选择器,其格式为选择器1,选择器2,选择器3,选择器n{语句1;};后代元素选择器,其格式为:祖先元素 后代元素{语句1;语句2;};相邻元素选择器 格式:E + F{格式声明语句;}(不常用)
伪类选择器:俗称先爱后恨 love-hate 解析:格式为
a:link,a:visited{设置超级链接的颜色;去除下划线;}
a:hover{设置超级链接的颜色;}
激活状态 :active{格式声明语句;}
正常状态 :link{格式声明语句;}
访问过后的状态 :visited{格式声明语句;}
鼠标放上状态 :hover{格式声明语句;}
属性选择器:属性选择器它是跟标签中的属性有关:
1)格式:[attr]{格式声明语句} attr是属性名
作用:匹配拥有指定属性的元素 这里只跟属性名有关 跟属性值没有关系
2)格式:[attr=val] {格式声明语句} (不常用)
作用:匹配attr这个属性的是val
3)格式:[attr^=val] {格式声明语句} (不常用)
作用:匹配attr这个属性的属性值是以val开头的所有元素
4)格式:[attr$=val] {格式声明语句} (不常用)
作用:匹配attr这个属性的属性值是以val结尾的所有元素
5)格式:[attr*=val] {格式声明语句} (不常用)
作用:匹配attr这个属性的属性值只要是包含了val的所有元素
3.继承性特点:
- 外层元素的样式会被内层元素所继承
- 不是所有的样式都能够被继承 只有文本与字体样式属性能够被继承
- 网页里面的文字大小 和文字的颜色 这些属性一般都是给body标记来设置 因为它是最外层的元素 它身上设置的样式能够被继承
4 .优先级
行内样式>ID选择器>类选择器>标签选择器《一般情况下》无独有偶,!important
用来提升属性的权重值 它的权重值无穷大
属性:属性值 !important;
5.一带多,优化代码,一值得是类
<标签名 class=”值1 值2 值3”></标签名>
6.背景样式属性:background其简写形式包括—color-image(常用)—repeat(取值为no-repeat;repeat-x;repeat-y)-position (水平位置:left、center、right 垂直位置:top、center、bottom)个数不定,顺序也不定
7.文本与字体属性
text-decoration:文本修饰线 none(去除修饰线)、underline(下划线)、overline(上划线)、line-through(删除线)
color:设置文本的颜色
font-size:设置字体大小 值要在单位 px
font-style:设置文字的样式 取值:italic(斜体)
font-weight:设置文本的加粗效果 取值:normal(正常) 、bold(加粗)
font-family:给文本设置字体 可以一次写多个字体 每一个字体要加双引号
text-align:设置文本的水平对齐方式 取值:left|center|right
text-transform:改变字母的大小写或者首字母大写 取值:lowercase(小写) 、uppercase(大写)、Capitalize(首字母大写)
line-height:设置行高 将一行文本在一个容器内垂直方向居中 它的值应该要与height这个属性的值一样
text-indent:首行缩进 取值:px 或者em (1个em指一个汉字的位置 ) 值可以是负数
尺寸样式:
width:设置宽度
height:设置高度
css-1