CSS样式表

简介:

1.样式复用,方便网站的后期维护;

        2.实现页面的精确控制,实现精美复杂页面;

        3布局定位;

        4外观美化;

  1 【三种使用CSS的方式】

     1、行内样式表:直接在HTML开始标签中使用style=""的方式引用;

                  特点:将CSS代码与HTML代码完全糅杂在一起,不符合W3C关于内容与表现分离的要求。不利于样式复用;

               优先级:最高。

     2、内部样式表: 在<head></head>中,使用<style type="text/css"></style>方式引用;

                  特点:将CSS代码与HTML代码分离,但是没有彻底分离CSS文件与HTML文件,不利于多页面复用样式。

     3、外部样式表:使用link标签链接CSS文件。 

        <link rel="stylesheet" type="text/css" href="css/01css.css" />

                 特点:实现了CSS与HTML的彻底分离,有利于样式复用及后期维护。

  

         【通用选择器】

                       1、写法: *{}

                       2、作用: 选中页面中的所有HTML标签

                       3、优先级:最低!

          【标签选择器】

                       1、写法: HTML标签名{ }

                       2、作用: 选中所有对应的HTML标签,并修改其样。

         【类选择器 class选择器】

                     1、写法: .选择器名{}

                     2、调用: 在需要修改样式的HTML标签上,使用class="选择器名"

                     3、优先级: 当作用于同一层时,class选择器>标签选择器

                       .list{

                      color: blue;

                             }

          【ID选择器】

                 1、写法: #选择器名{}

                 2、调用: 在需要修改样式的HTML标签上,使用id="选择器名"

                 3、优先级:同一层时,id选择器>class选择器

                 4、ID选择器是唯一的!同一页面严禁出现同名ID!!!

                     #first{

                     color: green;

                                 }

         【后代选择器】

                    1、写法: 选择器1 选择器2 …… 选择器N {}

                    2、生效规则: 选择器2必须是选择器1的【后代】……以此类推

          【子代选择器】

                        1、写法: 选择器1>选择器2>……>选择器N{}

                        2、生效规则: 选择器2必须是选择器1的【直接子代】……

                         div>ul>li{

                                          }

           【交集选择器】

                       1、写法: 选择器1选择器2……选择N{}

                      2、生效规则: 必须同时满足所有选择器,才会生效

                   li.list#first{

                                }

             【 并集选择器】

                       1、写法: 选择器1,选择器2,……,选择N{}

                       2、生效规则: 满足任意一个选择器,均可生效

                       .list,#first{

                         color: darkslategray;

                                        }

          【选择器命名规范】

                            1、只能有字母、数字、下划线组成;

                            2、开头不能是数字。

          【选择器优先级】

                         1、就近原则:近者优先。

                         2、当作用于同一层时:可有权重计算

                     权重划分: 标签选择器 1'














本文转自xsster51CTO博客,原文链接:http://blog.51cto.com/12945177/1950811 ,如需转载请自行联系原作者




相关文章
|
4月前
|
缓存 前端开发
css使用各类样式表
css使用各类样式表
|
3月前
|
前端开发 开发者
深入解析CSS样式表的优先级
深入解析CSS样式表的优先级
|
4月前
|
前端开发 搜索推荐 开发者
CSS不仅使得网页内容的呈现多样化和个性化成为可能,还大大简化了样式表的编写工作
【4月更文挑战第6天】CSS不仅使得网页内容的呈现多样化和个性化成为可能,还大大简化了样式表的编写工作
40 3
|
4月前
|
存储 缓存 前端开发
link 与 @import:CSS 样式表的加载策略(下)
link 与 @import:CSS 样式表的加载策略(下)
|
4月前
|
存储 前端开发 JavaScript
link 与 @import:CSS 样式表的加载策略(上)
link 与 @import:CSS 样式表的加载策略(上)
|
前端开发 数据可视化
漏刻有时数据大屏CSS样式表成长教程(4):数据指标层叠排版
漏刻有时数据大屏CSS样式表成长教程(4):数据指标层叠排版
76 0
|
4月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——CSS3、基础样式表
H5+CSS3+JS逆向前置——CSS3、基础样式表
55 0
|
存储 前端开发 JavaScript
CSS变量:如何使用CSS变量来简化样式表的管理和维护。
CSS变量:如何使用CSS变量来简化样式表的管理和维护。
CSS变量:如何使用CSS变量来简化样式表的管理和维护。
|
前端开发 数据可视化
漏刻有时数据大屏CSS样式表成长教程(3):使用样式表做圆环指示图标
漏刻有时数据大屏CSS样式表成长教程(3):使用样式表做圆环指示图标
221 2
|
数据可视化 前端开发
漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案
漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案
118 1