CSS样式表学习

CSS（层叠样式表:Cascading Style Sheets）

1.         样式表的核心规则
选择符{属性1：值；属性2：值2；}
例：h1{color:green;}

2.         样式表放在那个地方
内部的CSS、外部的CSS
内部的CSS:

(1)    直接在html代码行中加入样式规则。例题:first.html
语法格式如下：<标签名 style=”样式属性:属性值;样式属性:属性值;….”>

隶书”>样式表

这是在行内加入样式的效果

(2)    将样式表嵌入到html文件的文件头中。例题：first2.html

  
  
  
  
  

(3)    将一个外部样式表连接到html文件中例题:first3.html

 
 
 
 

(4)    将一个外部样式表输入到html文件中：例题:first4.html

1.         (1)CSS样式的编写
选择符组(可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义)
例如：p,table,td,th{font-size:9pt;}
(2)类选择符
用类选择符能把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。(一种是：html标记名+“。”+类名。第二种：“。”+类名,第二种是经常使用的方式)
例如：p.right{text-align:right;}   .right{text-align:right;}
     

这个段落向右对齐的

(3)ID选择符
与CLASS选择符类似，把CLASS换成ID就可以了
定义ID选择符要在ID名称前加上一个“#”号。
(4)包含选择符
可以单独对某种元素包含关系定义的样式表，例如元素1里包含元素2
例如： table a{font-size:12px;}这条样式只对表格内的链接改变了样式后，文字的大小为12像素，而表格外的链接的文字不变

2.         样式的优先级
ID样式的优先级高于CLASS，再其次是html标签选择符，如果想超越这三者之间的关系可以使用!import提升样式表的优先权。实例:css_jibie.html

3.         样式表的继承性
所在元素中嵌套的元素都会继承外层元素指定的属性值
例如：
div{color:red;font-size:9pt;}
…….

这个段落的文字为红色9号字

4.         CSS的注释
/**/

5.         伪类
伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动识别的特殊选择符，它的最大好处就是可以对链接在不同状态下定义不同的样式效果
书写顺序:
        a:link,a:visited,a:hover,a:actived

a:link {   
/*未访问的链接*/

                     color:#FF0000;

                     text-decoration:none;

                  }

a:visited{

                 /*已访问的链接*/

                  color:#00ff00;

                  text-decoration:none;

                  }

a:hover{           

                 /*鼠标在链接上*/

           color:#FF00FF;

                 text-decoration:underline;

                }

a:active{

                /*激活链接*/

          color:#0000ff;

                text-decoration:underline;

               }   
将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果：
例如：

       a.red:link{color:#FF0000;}
a.red:link{color:#0000FF;}
a.blue:link{color:#00FF00;}
a.blue:visited{color:#FF00FF}
< a cl ass=”red” href=””>这是第一组链接
< a cl ass=”blue” href=””>这是第二组链接
首行和首字的伪类，可以对元素的首字或首行设定不同的样式：
例如：

          

这是一个段落，这个段落的首字被放大了

1.         文本属性

Line-height:行高值
word- spacing:定义各个单词之间的间距
letter-spacing:定义每个字母之间的间距

text-decoration:定义文字的装饰样式（例如下划线等等）
text-indent:定义文本的首行的缩进

text-align:行对齐方式

vertical-align :垂直方向的对齐

9.边距属性
   属性         属性含义               属性值
   margin-top:   设置顶端边距            length|percentage|auto
   margin-right:  设置右侧边距            length|percentage|auto

   margin-bottom: 设置底端边距           length|percentage|auto

   margin-left    设置左侧边距            length|percentage|auto

10．填充距的属性
   属性         属性含义               属性值

   Padding-top ：设置顶端填充距         length|percentage|auto

   Padding-right：设置右侧填充距         。。。。。。

   Padding-bottom：设置底端填充距       。。。。。。

   Padding-left:设置左侧填充距            。。。。。。

11.边框属性（略）

   表单的美化

12.图文混排
  属性         属性含义                      属性值
  width         定义宽度属性                  length|percentage|auto
  height         定义高度属性                  length|auto

Float          使文字环绕在一个元素的四周    left|right\none
  clear           定义某一边是否有环绕文字     left|right|none|both

13.列表属性

 

14.滤镜的简介
CSS的滤镜属性的标识符是filter.
基本书写格式:
            filter:filtername(parameters)
只要进行滤镜操作，就必须先定义filter,filtername是滤镜属性名，这里包括alpha、blur、chroma等等多种属性

虎门博仕男科医院