CSS基础入门指南

发表时间: 2022-05-11 22:48

1.概念

层叠样式表（Cascading Style Sheets），用于美化网页。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

2.语法:由选择器和声明两大部分组成，声明又是由属性和属性值两部分组成

选择器{ 属性1：属性值1；属性2：属性值2； }

div { font-size: 12px;  color: #F00;  …… }/*声明放在花括号中，每条声明结束要加分号，属性和属性值之间用冒号，标点符号必须是英文*/

选择器：选择需要修改的网页内容。

基本选择器有三个（id、类(class)、标签）

① id选择器：使用#号开头，后面写上id的名称。body标签内的所有元素都有 id 属性。一个页面中只能使用一个id名，id名必须是唯一的。id名命名要语义化，不允许使用中文，数字，或以数字开头，关键词常见命名方法：驼峰命名法（qfEduTit）下划线连接命名法（qf_edu_tit）。

② 类(class)选择器：使用 . 号来表示开头，后面写上类的名称，body标签中的所有标签都有class属性。class名称可以重复使用。

③ 标签选择器：直接使用标签，html中的所有标签都可以作为选择器。

三种选择器的优先级：范围越小，优先级越大，id选择器>类(class)选择器>标签选择器

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>选择器</title>        <style type="text/css">            /*类选择器*/         /*  CSS注释的内容  */            .text{                color: red;            }                    /*id选择器  #*/            #idText{                color:pink;            }            /*标签选择器*/            p{                font-size:100px;            }            /*通配符选择器  匹配网页中所有的内容*/            *（注意前面是个星号){               }        </style>    </head>    <body>        <h1>css的基本选择器</h1>        <!--使用class属性的时候  他的属性值可以重复使用-->        <p class="text">xxx</p>        <p class="text">xxxx</p>                <!--id属性的属性值 只能是唯一的-->        <h1 id="idText">xxxx</h1>        <p id="idTextb">xxxx</p>                  <!--标签选择器-->        <p>段落标签</p>    </body></html>

3.引用方式

① 内联(行内样式)

<p style = "color: red;">xxx</p>直接写在标签中

② 内部样式表

将html代码和css样式做简单分离，在网页头部创建style标签，写入css样式，如上。

③ 外部样式表

将css样式单独写入到一个后缀名 .css 外部文件中，然后引入

（a）使用link标签引入外部css文件；

<link rel="stylesheet"  type="text/css"  href="demo.css">  link标签一般放在head部分，  rel="stylesheet"：声明外部样式；type="text/css"：引入文件类型；href="xxxx.css"：引入文件地址

（b）使用@import导入外部css文件，@import url(css文件路径);

两者区别：link引入的css文件和页面同时加载，而@import引入的css文件则是在页面加载完后才加载；link不存在兼容性问题，而@import是css2.1提出的，ie5及以下浏览器不支持；link属于html标签。

样式表的优先级：当多个样式表里给同一个元素设置相同样式时，会出现优先级问题，一般使用就近原则，即离被设置元素越近，优先级越高。

内联>内部样式>外部样式

4.更多选择器

①、后代选择器

语法：选择符1 选择符2{属性:属性值;} 选择符之间有空格

eg: ul li{ color:red; }

选择符1和选择符2必须满足包含与被包含的关系，才可以使用后代选择器

②、子选择器

语法：选择符1>选择符2{属性:属性值;}

总结：> 作用于选中元素的第一代后代(Child selectors)，空格作用于选中元素的所有后代。子选择器范围比后代选择器范围小。

子选择器

后代选择器

③、并集/群组选择器，当需要给不同类型的元素设置相同的样式时

语法：选择符1,选择符2,选择符3{属性:属性值;}

eg: h1,h2,h3,h6,p,b{ font-weight:normal; }

④、通配符（通用选择器）

语法： *{属性:属性值;}

*匹配包括html元素在内的所有标签元素

CSS基础入门指南

热门阅读

推荐阅读