当前位置：Gxlcms > html代码 > CSS(一)：认识CSS

CSS(一)：认识CSS

时间：2021-07-01 10:21:17 帮助过：5人阅读

1.什么是CSS

CSS 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。

-moz-transform:translateX(20px);
-webkit-transform:translateX(20px);
-ms-transform:translateX(20px);
transform:translateX(20px);

transform为CSS3的新属性，各浏览器都需要添加前缀来支持。

2.CSS能做什么

样式定义如何显示HTML 元素。
CSS把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。
CSS简化了前端开发工作人员的设计过程，更灵活的页面布局，更快的页面加载速度。
可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的代码，那么整个站点的所有页面都会随之发生变动。
目的：将表现与结构分离。

/* style.css */

body{
    background-color:#ccc;
}
h1{
    font-size:16px;
    font-family:"微软雅黑";
    font-weight:normal;
}



<head>
    <link rel="stylesheet" href="./style.css">
head>
<body>
    <h1>这是标题h1>
body>

3.CSS语法结构

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明，选择器通常是你需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是你希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

p{                  /* 选择器 */      
    color:red;      /* 属性:值; */
}

4.如何引入CSS

引入样式表的方法有三种：

外部样式表
内部样式表
内联样式

　　4.1 外部样式表

　　　　当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：

　　4.2 内部样式表

　　　　当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用

　　4.3 内联样式

　　　　内联样式是指将CSS样式直接写在HTML 标签中的style属性里。注意这种方式的引入CSS，是不需要写选择器的。

这是一个段落

　　4.4 三种引入方式的优先级对比

　　　　当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于标签内部）
内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

5.CSS代码注释

css 代码注释，以 /* 开始 */ 结束。

/* 公共样式*/

body { margin:0px; padding:0px;}    
    
/*导航样式开始*/
    
#nav {
      ……
    }

/*导航样式结束*/

6.CSS选择器

CSS选择器用于选择你想要的元素的样式的模式。

　　6.1 通配符选择器

　　　　* 选择器选择所有元素。* 选择器也可以选择另一个元素内的所有元素:

*{                  /* 选择所有元素 */
    margin:0;
    padding:0;
}
div *{              /* 选择div元素下的所有元素 */
    color:blue;
}

　　6.2 元素选择器

　　　　所谓元素选择符，指以网页中已有的标签名作为名称的选择符。

body{               /* 选择标签为body的元素 */
    font-size:16px;
}
a{                  /* 选择标签为a的元素 */
    text-decoration:none;
}

　　6.3 群组选择器

　　　　除了可以对单个标签进行样式指定外，还可以对一组标签进行相同的样式定义。使用逗号对选择符进行分隔。对页面中需要使用相同样式的元素，只需写一次样式。

h1,h2,h3,p{         
    font-size:16px;
    color:red;
}

CSS(一)：认识CSS

1.什么是CSS

2.CSS能做什么

3.CSS语法结构

4.如何引入CSS

4.1 外部样式表

4.2 内部样式表

4.3 内联样式

4.4 三种引入方式的优先级对比

5.CSS代码注释

6.CSS选择器

6.1 通配符选择器

6.2 元素选择器

6.3 群组选择器

人气教程排行

　　4.1 外部样式表

　　4.2 内部样式表

　　4.3 内联样式

　　4.4 三种引入方式的优先级对比

　　6.1 通配符选择器

　　6.2 元素选择器

　　6.3 群组选择器