首页 > 代码库 > 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.继承性特点:

  1. 外层元素的样式会被内层元素所继承
  2. 不是所有的样式都能够被继承  只有文本与字体样式属性能够被继承
  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