CSS基础：样式+选择器

最新推荐文章于 2022-06-10 20:25:14 发布

莓莓儿～

最新推荐文章于 2022-06-10 20:25:14 发布

阅读量264

点赞数

分类专栏： CSS 文章标签： CSS基础

本文链接：https://blog.csdn.net/fanfan_h/article/details/89333378

版权

CSS 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

CSS样式

一：css行内样式

 <h1 style="font-family: '宋体';">CSS层叠样式表(Cascading Style Sheets)</h1>

二：css内部样式

 <style type="text/css">
      /* p,h1,h2,h3,h4{font-size: 20px;}       /*不同内容设置相同属性时可用*/
       p{font-size:20px;
           color:blue;
           font-family: 隶书 ;}
       h1{color:red;
       font-size: 20px;}
       h2{font-size: 20px;}
       h3{font-size: 20px;}
       h4{font-size: 20px;}
   </style>
</head>
<body>
<h1>css层叠样式</h1>
<h2>css层叠样式</h2>
<h3>css层叠样式</h3>
<h4>css层叠样式</h4>
<p>用于定义HTML内容在浏览器中的显示样式</p>

</body>

说明：style要放在head标签之间
三：css外部样式

外部样式表,把css样式代码写在独立的一个文件中
扩展名：css文件名.css
引入外部文件：

<link rel="stylesheet" href="./css/bcss.css"/>

说明：link要放在head标签内
四：css导入式
@imporant “外部css样式”
五：css使用方法优先级
行内样式>内嵌样式>外部样式
默认的样式优先级：
如果样式直接没有冲突：则叠加
如果样式冲突：考虑优先级行内>内嵌>外部 (内嵌和外部加载的顺序，就近原则)

css选择器

标签选择器
类选择器（class的命名不能是纯数字）
ID选择器（id的命名不能是纯数字）
全局选择器
群组选择器
后代选择器：
父子之间用空格，匹配的是当前元素里面的所有的后代元素，匹配的是当前元素的直接子集

  <style type="text/css">
      p.special,#three,h1{font-size: 40px;}                        /*群组选择器*/       /*多个不同内容设置相同属性时可用*/
        p{color:red;}                                  /*  标签选择器*/
       .special{color: blue;}          /*设置了class为special的标签,引用该样式*/
       p.special{font-size:40px;}    /* 只有设置了class为special的<p>标签，才能使用该样式*/
       .one{text-decoration: underline;}/*设置了class为one的标签,引用该样式*/
        #two{color: green;}           /*设置了id为two的标签,引用该样式*/
       #three{font-size: 40px;}       /*设置了id为two的标签,引用该样式*/
        h1{font-size: 40px;}
        *{font-size: 40px;color:deeppink;}          /*全局选择器,可以同时设置所有文字样式，    在使用前
         将其他编辑的样式全部取消*/
        em{color:red;}  
        .classred{color:red;}          /*class选择器*/
        p em{color:blue;}                 /*后代选择器 ,父子标签之间用空格隔开，给p标签下的em标签中的内容设置颜色*/
        h1.special em{color:pink;}         /*后代选择器 ,给带有special标签的h1标签下的，em标签中的内容设置颜色*/
    </style>
</head>
<body>
     <h1 class="special"><em>CSS</em>是什么</h1>
<p><em>CSS</em>层叠样式</p>                                                  <!--class选择器-->
<p class="special one">用于定义HTML内容在浏览器中的显示样式</p>    <!--class标签中可以设置多个标签，标签间用空格隔开-->
<p><em>CSS</em>样式有选择器和声明组成</p>
<div>
    <h1 id="two"><em class="classred">CSS</em>使用方法</h1>                        <!--id选择器-->    <!--  class选择器 -->
    <ul id="three">                                             <!--同一个文件中不能使用两个相同的ID,否则无效-->
        <li>行内样式</li>
        <li>内部样式</li>
        <li>外部样式</li>
        <li>导入式</li>
    </ul>

css选择器的优先级
id选择器>class选择器>标签选择器
同一样式表中：

权值相同	权值不同
就近原则	使用权值高

<style type="text/css">
       div{color:pink;}
        #idgreen{color:green;}
        .classyellow{color:yellow;}
        .classblue{color:blue;}
        .classyellow{color:yellow;} /*就近原则*/
       div{color: orange;} 
    </style>
</head>
<body>
   < <p>单独使用</p>
     <div>使用标签选择器样式</div>
     <div id="idgreen">使用ID样式“绿色”</div>
     <div class="classblue">使用class样式“蓝色”</div>  
     <!--优先级结果：id选择器>标签选择器;class选择器>标签选择器-->
    <p>同一个元素引用标签、id、class定义的样式</p>
     <div id="idgreen" class="classblue">CSS优先级，同时引用标签、id、class定义的样式</div>
     <div class="classblue" id="idgreen">CSS优先级，同时引用标签、id、class定义的样式</div>  
     <!--优先级结果：id选择器>class选择器>标签选择器-->
   <p>同一个元素引用标签、id、class定义的样式</p>
     <div class="classblue classyellow">CSS优先级,蓝色在前，黄色在后</div>
     <div class="classyellow classblue">CSS优先级,黄色在前，蓝色在后</div>
     <p>同一个元素引用标签、id、class定义的样式</p>
     <div>CSS优先级</div>   
     <!--优先级结果：同类样式的选择器多次引用，样式表中后定义的优先级高(就近原则)-->

</body>

！important 规则

可调整样式规则的优先级
添加在样式规则之后，中间用空格隔开
注：important的优先级最高（高过行内样式）

莓莓儿～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础：样式+选择器

CSS样式一：css行内样式 <h1 style="font-family: '宋体';">CSS层叠样式表(Cascading Style Sheets)</h1>二：css内部样式 <style type="text/css"> /* p,h1,h2,h3,h4{font-size: 20px;} /*不同内容设置相同属性时...
复制链接

扫一扫