常见CSS(层叠样式表)介绍

来源：互联网发布：sql字段前加内容 db2 编辑：程序博客网时间：2024/06/05 12:46

CSS(cascading style sheet，层叠样式表)

1.CSS简介

           CSS(cascading style sheet，层叠样式表)是描述文档怎么样被呈现的语言，使用CSS可以对HTML文档进行描述。
           语法：
               1)CSS属性和值之间用冒号分隔
               2)CSS属性之间用分号分隔（建议每个属性后都书写分号）
               3)CSS的值有多个的时候使用空格分隔
       2.CSS在网页中的使用
           1）内嵌式
               每个HTML元素都包含有一个style属性，使用该属性可以直接指定样式
               <p style=""></p>
               存在问题：
                   1.不方便修改
                   2.结构与显示不能很好的分离
                   3.建议在测试或个别情况下使用
           2）嵌入式
               CSS样式定义内容位于style元素之间，其type属性必须被定义为text/css
               <head>
                   <style type="text/css">
                   </style>
               </head>
           3）外部引用时
               可以在多个文档间共享样式表，提高效率；可以改变样式表而无须改变HTML文档。
               <head>
                   <link rel="stylesheet" href="url" type="text/css">
                   或者
                   <style type="text/css">
                       @import "style.css";
                       @import url("style.css");
                   </style>
               </head>
               推荐使用第一种方式
       3. CSS基本语法规则
           1）选择器
           用于选择html中的元素
           html标签选择器
                即html标签，任何一个HTML元素的标签名都可以是css的选择器
                p{   text-indent:10px} /*段落第一行缩进10像素*/
                h1{ color:red}

               优先级：
                   默认情况下，子级通常先继承父级标签属性
                   如果子级和父级拥有相同的属性，子级优先，就近原则
                   类选择器的优先级高于标签选择器
           类选择器
                 class属性
                  .类名(类名不能使用数字开头，不能使用关键字来命名)
                  .rr{ color :red}

                  使用class属性来调用类名称
                 <p class="rr">one</p>
                 <p class="rr">two</p>
                 <p class="rr">three</p>
           ID选择器
                 id属性
                  #id名
                  #two{background-color:green}
                 <p class="rr">one</p>
                 <p id="two" class="rr">two</p>
                 <p class="rr">three</p>
           关联选择器
                 它们的优先级比单一的选择器大。
                                 后代选择器选择a元素里面所有后代元素中的b元素
                                 a b{...}
            子代选择器选择a元素里面第一代子元素中的b元素
                   a > b{...}
           组合选择器
                 使用逗号,隔开选择器，可以减少样式表的重复声明
                 h1,h2,h3,h4{color:red}
           伪元素选择器
                 是指对同一个HTML元素的不同状态的一种定义方式
                HTML标签:伪元素{}
                a:link{}   超链接没有任何动作前的状态
                a:hover{}   光标移动到超链接上的状态
                a:active{}   点击超链接时的状态
                a:visited{} 访问过超链接的状态
               text-decoration:none 去掉下划线
       2）选择器优先级
           多个CSS选择器同时作用于同一个html时，声明不同的属性具有继承的关系，如果声明的是相同的属性，则以优先级高的为主。
           >内嵌式
           > 关联选择器(后代，子代，组合(且))
           > ID选择器
           > 类选择器
           > HTML选择器
           同级别的后者覆盖前者
           就近原则
       3）样式
           样式是零个或多个以分号分割的【属性名：属性值】列表
       4）规则集
           选择器样式
           选择器{属性名:属性值;属性名:属性值}
       5）注释
           /*
               注释内容
           */
   4. CSS常见的样式属性和值
       1）CSS 尺寸属性
           (注意块级元素和行内元素的区别)
            height   设置元素高度。
            width   设置元素的宽度。
       2）字体属性
            font-family字体族科
               宋体 SimSun
               黑体 SimHei
               微软雅黑 Microsoft YaHei
               微软正黑体 Microsoft JhengHei
               新宋体 NSimSun
               新细明体 PMingLiU
               细明体 MingLiU
               标楷体 DFKai-SB
               仿宋 FangSong
               仿宋_GB2312 FangSong_GB2312
               楷体_GB2312 KaiTi_GB2312
            font-size   字体大小
            font-style   字体风格
               normal   正常;italic 斜体;oblique 倾斜
            font-weight字体加粗
               normal 正常;bold 粗体;bolder 更粗;lighter 更细
            text-decoration 规定添加到文本的修饰：
               none        默认。定义标准的文本。
               underline    定义文本下的一条线。
               overline    定义文本上的一条线。
               line-through    定义穿过文本下的一条线。
               blink        定义闪烁的文本。
       3）颜色
           color   设定文本的颜色
           opcity   设置透明度
           所有浏览器都支持 opacity 属性。
           注释：IE8 以及更早的版本支持替代的 filter 属性。
           例如：filter:Alpha(opacity=50)。
           一般两个属性一起写，保证兼容性
           filter:Alpha(opacity=50);
           opacity:0.5;
       4）背景
            设置元素的背景颜色。background-color:#CCC;
            设置元素的背景图像。background-image: url('19952234_1366184400450.jpg');
            设置是否及如何重复背景图像。background-repeat: no-repeat;
               repeat    默认。背景图像将在垂直方向和水平方向重复。
               repeat-x    背景图像将在水平方向重复。
               repeat-y    背景图像将在垂直方向重复。
               no-repeat    背景图像将仅显示一次。
               inherit    规定应该从父元素继承 background-repeat 属性的设置。
            background-attachment
               设置背景图像是否固定或者随着页面的其余部分滚动。
               fixed   固定
               scroll   滚动
            background-position
               设置背景图像的开始位置。这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。您需要把 background-attachment属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
                  横向关键字： left center right
                  纵向关键字： top center bottom
               百分比：
                  左上角是 0% 0%。右下角是 100% 100%。
            background
               简写属性在一个声明中设置所有的背景属性。
               background:#ff0000 url('smiley.gif') no-repeat;
       5）边框属性
            border-style 设置4个边框的样式
               dotted    定义点状边框。在大多数浏览器中呈现为实线。
               solid       定义实线。
               double 定义双线。
               dashed 定义虚线。
               none    定义无边框
               ...
               如果4个值都给定了，分别应用于上，右，下, 左
                   border-style: solid dashed dashed solid;
               如果给定1个值，应用于各边;
                   border-style: solid;
               如果给定2个值，第一个值应用于上下边，第二个值应用于左右边
                   border-style: solid dashed;
            border-width 设置4个边框的宽度
            border-color 设置边框颜色
            border        在一个声明设置所有的边框属性。
               border:1px solid #ff0000
       6）鼠标光标属性
           cursor   属性规定要显示的光标的类型（形状）。
               none   无
               auto    默认。浏览器设置的光标。
               pointer 光标呈现为指示链接的指针（一只手）
               wait    此光标指示程序正忙（通常是一只表或沙漏）。
               help    此光标指示可用的帮助（通常是一个问号或一个气球）。
       7）列表属性
            list-style-image    将图象设置为列表项标记。
               list-style-image:url("/i/arrow.gif");
            list-style-position 设置列表项标记的放置位置。
               inside    列表项目标记放置在文本以内，且环绕文本根据标记对齐。
               outside 默认值。保持标记位于文本的左侧。列表项目标
                   记放置在文本以外，且环绕文本不根据标记对齐。
               在Firefox中的查看器中选中ul即可看出区别
            list-style-type    设置列表项标记的类型。
               none    无标记。
               disc       默认。标记是实心圆。
               circle    标记是空心圆。
               square 标记是实心方块。
               decimal 标记是数字。
               ower-roman   小写罗马数字(i, ii, iii, iv, v, 等。)
               upper-roman   大写罗马数字(I, II, III, IV, V, 等。)
               lower-alpha   小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
               upper-alpha   大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
               lower-latin   小写拉丁字母(a, b, c, d, e, 等。)
               upper-latin   大写拉丁字母(A, B, C, D, E, 等。)
           list-style        在一个声明中设置所有的列表属性。
               list-style: square inside url('/i/eg_arrow.gif')
       8）表格
           优先级：
               td,th-->tr-->tbody,thead,tfoot-->table (从里向外的规则)
           color,font-size
           text-align   文字对齐
           background
           border        边框，只能用于table,th,td
           margin        间距，只能用于table,caption
           padding    内间距，只能用于th,td
           width        宽，只能用于table,td,th
           height        高，只能用于table,td,th、可以用于tr并且优先级高于td
           caption-side 标题位置：
               top/left/right/botton

1 0