03 - 常用css和css规范

最新推荐文章于 2019-09-05 21:26:49 发布

xyyojl

最新推荐文章于 2019-09-05 21:26:49 发布

阅读量551

点赞数

分类专栏：前端 html+css 文章标签：前端 css 选择器

本文链接：https://blog.csdn.net/xyyojl/article/details/81210921

版权

前端同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

html+css

21 篇文章 0 订阅

订阅专栏

03 - 常用css和css规范

在我们的实际开发过程中,不会直接通过strong标签(em标签)调整元素,用css去调整页面中元素的样式

1.CSS-层叠样式表（Cascading Style Sheets）

层叠:css的样式存在,有一定的样式规则,根据样式规则的优先级决定是否覆盖
样式表:描述元素在页面中的展示效果,将页面的元素的展示效果分离出来单独控制,结构和样式分离，用css描述页面的元素的特点，样式表是使用于某一些符合条件的元素，有一定的规则的
你写了一个样式，别人写了另外一个样式，到底谁的能够显示呢？这就存在覆盖问题

2.样式的分类

样式的分类:行内样式,内部样式,外部样式

对于页面的结构展示不直观,不方便维护

行内样式(internal style)
- 特点1:直接作用到当前元素身上,十分准确,优先级最高
- 特点2:对于页面的结构展示来说,不直观,不方便维护
- 特点3:行内样式使代码结构变得复杂,,代码冗长,不方便阅读,如果和它有同样的样式,这样写太繁琐了
- 特点4:直接写到标签里面的style属性当中(样式),以分号间隔多条样式

代码示例-文字变颜色(行内样式),一定要写分号;:

<p style='color:#ff0036;background-color:green;'>我会变色,你会吗?我就是变色龙</p>

内联样式(第二套语法结构):
- 特点1:选中元素才能设置样式,选不中,则样式不展现,存在样式冲突(优先级问题)
- 特点2:存放在style标签当中,style(style对外展示效果)放到head标签里面
- 特点3:方便维护,结构和样式分离,可复用
- 特点4:做小demo经常使用内联样式
- 特点5:同一个内联样式当中,同样的选择器后写的的样式会把前面写的覆盖

<style>
    p{/*单条样式以分号作为分隔;样式名:样式值;*/
        color:red;
    }
    /*这是style里面的注释*/
</style>

外部样式(企业级开发中使用)
- <link rel='stylesheet' href=''>
  写入head,优先书写,阻塞进程,读取完成后加载dom
- @import url(‘’); 必须写在样式头部
  写入style,优先书写,不影响进程,可能看到无样式dom,到有样式dom的变化,后续可添加媒体查询
- 特点1:需要以单独的文件(.css)存放代码,然后通过link标签引入
- 特点2:外部样式表的写法和内联样式一致
- 特点3:做到项目的时候,要使用外部样式
- 特点4: 编码格式是文件的保存格式,所以外部css也要有编码格式,在文件的第一行,需要输入@charset 'utf-8'

<link rel='stylesheet' href='引用资源的地址'>
<!-- 使用的写法如下,两种写法都可以 -->
<!--标准写法-->
<link rel='stylesheet' href='./style.css'>
<link rel='stylesheet' href='style.css'>

样式的优先级:

行内样式>内联样式>=外联样式

内部样式优先级>=外部样式优先级,因为link写在前面所以优先加载,后续内部样式覆盖

3.css的结构(语法)

选择器(选择满足条件的所有元素)+{样式名:样式值;样式名:样式值;}
选择器(主语)+{单条声明;单条声明;}
单条样式以分号作为分隔

<style>
    p{/*满足条件的所有元素*/
        width: 100px;/*宽度*/     /*样式名: 样式值;*/
        height: 100px;/*高度*/
        color: green;/*字体颜色*/
        background: red;/*背景颜色*/
        font-size: 18px;/*字体大小*/
        font-weight:bold;/*字体粗细*/
        /*以上几种属性比较常用*/
    }   
</style>

4. css简单选择器

css选择器:为了方便选中所要设置的元素,可以选择单个/多个

简单选择器:

元素(标签)选择器
id选择器
class选择器

优先级: id选择器 > class选择器 > tagName(标签)选择器

元素选择器

直接写上标签名,缺点:容易污染样式(污染自己/别人的代码),指向不准确

PS.尽量少用标签选择器

代码示例:

<head>
     <style>
        p{/*选择了页面的所有的p*/
            color:blue;/*字体颜色*/
        }
     </style>
</head>
<body>
    <p>光说不练假把式</p>
</body>

id选择器

代表个人身份证,当前页面的唯一命名,唯一性,ID可以多次出现,但是相同ID名称只能出现一次,在js使用比较多

<head>
     <style>
          #text1{
             color:blue;/*字体颜色*/
          }
          #text2{
             color:red;
         }
     </style>
</head>
<body>
     <p id='text1'>只要你动手,学不会算我输!</p>
     <p id='text2'>只要你动手,学不会算我输!</p>
</body>

class选择器

不具有唯一性,同一个类名可以多次出现,通常用于css样式设置,描述一类相似的元素可以重复出现

<head>
     <style>
      .text{
         color:blue;/*字体颜色*/
      }
     </style>
</head>
<body>
     <p class='text'>不懂的,先问问自己到底能不能解决</p>
     <p class='text'>自己是否真的用心去解决了</p>
</body>

id选择器与id选择器的区别:

命名方式	选择器的使用	特点	优先级	适用范围
class=’box’	.box{}	一类具有相似特点的元素	低	css
id=’box’	`#box{}`	页面唯一的元素	高	JS或大模块顶部

简单选择器的优先级:

行内元素>id>class>tagName(标签)
两个选择器选中同一个元素设置同一条样式,会遵循选择器优先级关系
同样的选择器,写在后面的会把写在前面的覆盖掉

!important优先级最高,不推荐使用

<style>
    #box{
        width: 200px;
        height: 200px;
        background-color: red; 
    }
    .box{
        width: 100px;
        height: 100px;
        background-color: green;   
    }
    div{/*!important的使用*/
        width: 50px;
        height: 50px;
        background-color: yellow !important;
    }
</style>
<body>
    <div class='box' id='box'></div>
</body>

5.CSS命名规范

使用类选择器,尽量避免使用ID选择器定义样式,ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用

命名以字母开头,不能单个字母作为选择器,不允许带有广告等英文的单词,ad,adv,adver,advertising,防止该模块被浏览器当成垃圾广告过滤掉
全小写,统一以-作为连字符不允许使用_,不要出现-与数字相连,禁止驼峰命名
见名知意

6.组合选择器

后代选择器
子代选择器
相邻(毗邻)选择器
兄弟后代选择器

后代选择器

中间用空格隔开
选中的元素永远是最后一个挨着大括号的元素

<style>
     #wrap .content p{/*后代选择器:*/
        width:200px;
        height:200px;
        background-color:yellow;
        color:red;
     }
</style>
<body>
    <div class='wrap'>
        <p>只要你动手,学不会算我输!</p>
    </div>
</body>

子代选择器

严格的父子关系,选中的元素永远是挨着大括号的元素

<style>
     #wrap .content > p{
        width:200px;
        height:200px;
        background-color:yellow;
     }
</style>
<body>
    <div id='wrap'>
         <div class='content'>
            <p>我是最小的那一个</p>
         </div>
     </div>
</body>

毗邻元素选择器 +,不不不,我是问你身后挨着小姐姐

如果li同级相邻的为li标签,选择后面那个li标签同级关系,选中的元素永远是挨着大括号的元素

<style>
     .list li + li{/*前面有相邻li标签的li标签会变成红色*/
        color:red;
     }
</style>
<body>
    <ul class='list'><!--2,3,4变成红色-->
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>

兄弟元素选择器 ~,不不不,我是问你身后的所有的小姐姐

<style>
     /*兄弟元素选择器*/
    /*前面有li标签的li标签会变成红色*/
    .list li~li{
        color:red;
    }
</style>
<body>
    <ul>
        <li>1</li><!--24变红-->
        <li>2</li>
        <p>3</p>
        <li>4</li>
    </ul>
</body>