css基础知识1—— - 码农教程

CSS是层叠样式表，用于定义HTML内容在浏览器内的显示样式

css的优点：

（1）css简化html相关标签，网页体积小，下载快

（2）解决内容与表现分离的问题

（3）更好的维护网页，提高工作效率

css基础语法

(1)css样式规则由两部分组成：选择器、声明

选择器的作用是：告诉浏览器给网页中的谁去设置样式

声明：是由一对对的名值对组成格式，两个名值对之间由分号隔开：{属性名：属性值；属性名：属性值；.....}

css样式格式：

选择器{属性名：属性值；属性名：属性值；.....}

选择器1，选择器2，选择器3，选择器4......{属性名：属性值；属性名：属性值；.....}表示多个选择器都设置了相同的样式

（2）css注释格式：/*注释语句*/

css使用方法

(1)css的引用方式

a.内联样式（行内样式）

在开始标签内添加style样式属性，如:<p style="color: red;font-family: '微软雅黑';...">内容 </p>

缺点：增加html代码的冗余性，使代码没有达到分离的效果，同时也不便于后期的维护

b.嵌入样式（内部样式表）

在<head></head>标签内：加入<style type="text/css"> css样式...... </style>

如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>内部样式表</title>
        <style type="text/css">
            h1,h2{color: red;font-family: "微软雅黑";}
            p{color: black;font-size: 20px;}
        </style>
    </head>
    <body>
        <h1>我是一号标题</h1>
        <h2>我是二号标题</h2>
        <p>我是p标签</p>
    </body>
</html>

c.外部样式表

把css样式代码写在独立的一个文件中，然后再在<head></head>之间进行文件的引入，扩展名：css文件名.css

引入外部文件：

<head>

</head>

注意：<link/>也是放在<head>标签之间

外部样式表在开发时经常使用到它的优点：css与html是分离的，便于代码的修改，后期也好维护

d.导入式

这种方式同样写在<style>标签内，但是要导入的文件同样是单独的css格式的文件

@import “外部css样式”

格式：

<head>
        <meta charset="UTF-8">
        <title>导入式</title>
        <style type="text/css">
            @import url("XXX.css");/*写法一*/
            @import "XXX.css";/*写法二*/
        </style>
    </head>

css引入方法的总结：

（2）css使用方法优先级

行内样式>内部样式>外部样式

说明：

1.链入外部样式表与内部样式表之间的优先级取决于所处位置的先后

2.最后定义的优先级较高（就近原则）

css选择器

（1）标签选择器

以HTML标签作为选择器

如：

h1,h2{color: red;font-family: "微软雅黑";} p{color: black;font-size: 20px;}

（2）类选择器

为HTML标签添加class属性,通过类选择器为具有此class属性的元素设置css样式,格式：.class名{属性名：属性值；属性名：属性值...}

<head>
        <meta charset="UTF-8">
        <title>类选择器</title>
        <style type="text/css">
            .red{color: blue;}
        </style>
    </head>
    <body>
        <h1 class="red one">我是一号标题</h1>
        <h2>我是二号标题</h2>
        <p class="red">我是p1标签</p>
　　　　　<p >我是p2标签</p>



    </body>

 p.red{color: red;font-size: 20px;} h.red{color: blue;}可对不同类型元素的同一个名称的类选择器设置不同的样式规则
这里只有设置了class属性的<p><h1>标签才可以引用该样式
又如<h1 class="red one">我是一号标题</h1>这里引入多个class属性值，中间用空格隔开

（3）ID选择器

为HTML标签添加ID属性，通过ID选择器来为具有此ID的元素设置css规则

如：

<head>
        <meta charset="UTF-8">
        <title>类选择器</title>
        <style type="text/css">
            #red{color: red;}
            .blue{color:blue}
        </style>
    </head>
    <body>
        <h1 id="red">我是一号标题</h1>
        <h2>我是二号标题</h2>
        <p class="blue">我是p标签</p>
    </body>

（4）全局选择器

为所有标签设置样式：*{color:blue;......}

（5）群组选择器

格式如下：h1,.h2，#red{color: red;font-family: "微软雅黑";}，选择器与选择器之间用逗号隔开

（6）后代选择器

使用后代选择器设置，之间用空格隔开，

格式：

p em{font-size:40px}表示p元素下的所有em标签的字体大小都设置为40px

#p1 em{......}表示id为p1标签中的em

p.red a em{......} 表示class为red的p标签中的a标签中的em

(7) 伪类选择器

伪类选择器定义特殊状态下的样式，它用来完成标签、id、class及其他属性不能完成的样式

a.链接伪类：

链接的4种状态：激活状态、已访问状态、未访问状态、鼠标悬停状态

注意：

(1)hover和active不只是用用于a标签它们也可以用于其他的元素

hover是用于访问的鼠标经过某个元素时

active用于一个元素被激活时（即按下鼠标之后到放开鼠标之前的时间）

如：p:hover{color；red} p:active{font-size:20px}

(2)IE及更早版本，支持<a>元素的4种状态

IE6浏览器不支持其他元素的：hover和active

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪类选择器</title>
        <style type="text/css">
            a:link{color: blue ;}
            a:visited{color:green;}
            a:active{color: orange;}
            p:hover{color: red;}
            p:active{font-size: 20px;}
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com" target="_blank">css使用方法</a>
        <p>慕课网</p>
    </body>
</html>

css继承和层叠

（1）css继承

（2）css层叠

css优先级

css命名规范

原文地址：https://www.cnblogs.com/qiumh/p/11923855.html