CSS基础语法-选择器/优先级/继承和叠层

最新推荐文章于 2024-09-03 23:03:56 发布

S_yeol

最新推荐文章于 2024-09-03 23:03:56 发布

阅读量226

点赞数

文章标签： css html web

本文链接：https://blog.csdn.net/qq_45228525/article/details/109581780

版权

二、CSS基础语法

1.如何应用CSS样式

行内样式（内联样式）：在开始标签内添加style样式属性
内部样式表（嵌入样式）
外部样式表
导入式

2.样式的优先级

行内样式>内部样式>外部样式
说明！！
（1）链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
（2）最后定义的优先级最高，就近原则

3.CSS选择器

标签选择器
类选择器
ID选择器
全局选择器
群组选择器
后代选择器

4.伪类

-伪类选择器定义特殊情况状态下的样式
-无法用标签、id、class以及其他属性实现
-伪类链接的四种状态：激活（:active）、已访问(:visited)、未访问(:link)和鼠标悬停状态(:hover)
-:hover用于访问鼠标经过某个元素时，:active用于一个元素被激活时（按下鼠标之后放开鼠标之前的时间）
-ie6以及更早版本，支持a元素的4种状态
-ie6浏览器不支持其他元素的:hover和:active
-链接伪类的顺序是link>visited>hover>active
说明：hover必须置于link和visited之后才有效；active必须置于hover之后才有效；伪类名称对大小写不敏感。

5.css层叠

可以定义多个样式
不冲突的时候，多个样式可层叠为1个
冲突时，按不同样式规则优先级来应用样式

6.css优先级

同一样式表中：
（1）权值相同-就近原则（离被设置元素越近优先级越高）
（2）权值不同-根据权值来判断CSS样式/哪种CSS样式权值高，就用哪种样式
（3）选择器权值
标签选择器：权值为1
类选择器和伪类：权值为10
ID选择器：权值为100
通配符选择器：权值为0
行内样式：权值为1000
(4)权值规则
统计不同选择器的个数
每类选择器的个数乘以相应权值
把所有的值相加得出选择器的权值
#main div.warning h2{…}

选择器	权值
id:1	1*100=100
class:1	1*10=10
标签：2	2*1=2
权值	100+10+2=112

（5）！important规则

可以调整样式规则的优先级
添加样式规则之后，中间用空格隔开
（6）css优先级总结
！important声明最高
css使用样式的优先级：行内样式>内部样式>外部样式注意：link链入外部样式和style内部样式优先级，取决于先后顺序。
样式表中的优先级：id选择器>class选择器>标签选择器>通配符
权值相同->就近原则；权值不同->使用权值高的

7.css样式命名规则

采用英文字母、数字以及”-“和”_“命名
以小写字母开头，不能以数字和“-”、“_”开头
命名形式：单字、连字符、下划线和驼峰
使用有意义的命名

8.常用的css样式命名

（1）页面结构

页头：header
页面主题：main
页尾：footer
内容：content/container
容器：container
导航：nav
侧栏：sidebar
栏目：column
页面外围控制：wrapper
左右中：left、right、center
(2)导航
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题：title
摘要：summary
(3)功能
标志：logo
广告：banner
登录：login
登录条：loginbar
注册：register
搜索：search
功能区：shop
标题：title
注意：id不能滥用，谨慎使用；适当的使用class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类选择器</title>
    <style type="text/css">
        /* a:link{color:blue}/*未访问状态*/
        /*a:visited{color: gray;}/*已访问状态*/
        /*a:hover{color:green}/*鼠标悬浮状态*/
        /*a:link{color: orange;}/*激活状态*/

        /* a.one:link{color: rgb(0, 102, 255);}
        a.one:visited{color:rgb(51, 128, 0);}
        a.one:hover{color: palevioletred;}
        a.one:active{color:darkgrey;}

        a.two:link{color: blue;}
        a.two:visited{color: green;}
        a.two:hover{color: red;}
        a.two:active{color: gray;} */

        p a:link{color: rgb(0, 102, 255);}
        p a:visited{color:rgb(51, 128, 0);}
        p a:hover{color: palevioletred;}
        p a:active{color:darkgrey;}

        div a:link{color: blue;}
        div a:visited{color: green;}
        div a:hover{color: red;}
        div a:active{color: gray;}
    
        p:hover{color: red;}
        p:active{font-size: 20px;} 
    </style>
</head>
<body>
    <p><a href="http://www.imooc.com" target="_blank" class="one">css使用方法</a></p>
    <div><a href="http://coding.imooc.com" target="_blank" class="two">css选择器</a></div>
    <p>慕课</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css选择器</title>
    <style type="text/css">
        /*全局选择器*{color: pink;}*/
        p,special,#three,h1{font-size: 30px;}
        p{color: crimson;}/*通过标签选择器设置样式，使用该标签的内容都引用该样式0*/
        .special{color: darkgreen;}
        /*p.special{font-size: 30px;}*/
        .one{text-decoration: underline;}/*文字修饰样式属性*/
        #two{color: darkslateblue;}
        /*#three{font-size: 15px;}
        h1{font-size: 30px;}*/
        p em{color: plum;}
        h1.special em{color: orange;}
        #two em{color:yellow}
        h1 em{color: tomato;}
    </style>
</head>
<body>
    <h1 class="special">css使用方法</h1>
    <p><em>css</em>叠层样式</p>
    <P class="special one">用于定义HTML内容在浏览器中显示样式</P>
    <P><em>css</em>样式由选择器和声明组成</P>
    <div>
        <h1 id="two"><em class="two1">css</em>使用方法</h1>
        <ul id="three">
            <li>行内样式</li>
            <li>内部样式</li>
            <li>外部样式</li>
            <li>导入式</li>
        </ul>

        <h1><em>css</em>选择器</h1>
        <ul>
            <li>类型选择器</li>
            <li>ID选择器</li>
            <li>class选择器</li>
            <li>后代选择器</li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css使用方法优先级</title>

 
    <style type="text/css">
        /**{color:black}*//*0*/
        b{color: purple;}/*权值1*/
        p b{color: yellow !important;}/*权值2,!important优先级最高*/
        .classblue{color: blue;}/*10*/
        #test1 p b {color: orange;}/*10*10+2*/
        div p.classblue{color: red;}/*10+2*/
        div #test2 b{color: green;}/*2标签2id=102*/
        /*权值相同采用就近原则*/
        /* div{color: greenyellow;}
        #idgreen{color: green;}
        .classblue{color: blue;}
        .classyellow{color: yellow;} */
       /*@import url("demo1.css");/*依旧是行内>内联>导入*/
        /*p{color: crimson;}/*行内优先级内联*/
    </style>
        <!--<link rel="stylesheet" type="text/css" href="demo2.css"><--外部式-->
        <!--外部链接导入和行内优先级取决哪个离body更近,就近原则-->
</head>
<body>
    <p>派生选择器优先级</p>
    <div id="test1">
        <h1>css样式优先级</h1>
        <p id="test2">所谓<b class="classblue">css优先级</b>，指css样式在浏览器中被解析的先后顺序</p>
        <div><b>权值相同</b>，就近原则；<b>权值不同</b>，哪个权值高，使用哪个</div>
    </div>
    <!-- <p>单独使用</p>
    <div>使用标签选择器样式</div>
    <div id="idgreen">使用ID样式"绿色"</div>
    <div class="classblue">使用class样式"蓝色"</div> -->
    <!--id>class>标签-->
    <!-- <div class="classblue classyellow">蓝色在前，黄色在后</div>
    <div class="classyellow classblue">黄色在前，蓝色在后</div> -->
    <!--class发生冲突的时候采用就近原则，显示黄色-->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css继承和层叠</title>
    <style type="text/css">
        /* p{color: hotpink;} */
        /* div{font-size: 12px;border: 1px solid palevioletred;} */
        /* body,table,tr,td{font-size: 12px;} */
        h1{color: palegreen;}
        h1{color: palevioletred;}/*就近原则，显示此颜色*/
        h1{font-size: 12px;}
    </style>
</head>
<body>
    <!-- <div>
        <p><span>css继承</span></p>
        <div>css层叠</div>
    </div> -->
    <h1>css继承和层叠</h1>
    <!-- <table border="1">
        <tr>
            <td>css继承</td>
            <td>css层叠</td>
        </tr>
    </table> -->
</body>
</html>

S_yeol

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础语法-选择器/优先级/继承和叠层

二、CSS基础语法1.如何应用CSS样式行内样式（内联样式）：在开始标签内添加style样式属性内部样式表（嵌入样式）外部样式表导入式2.样式的优先级行内样式>内部样式>外部样式说明！！（1）链入外部样式表与内部样式表之间的优先级取决于所处位置的先后（2）最后定义的优先级最高，就近原则3.CSS选择器标签选择器类选择器ID选择器全局选择器群组选择器后代选择器4.伪类-伪类选择器定义特殊情况状态下的样式-无法用标签、id、class以及其他属性实现
复制链接

扫一扫