css 基本样式与元素选择器以及命名规范

最新推荐文章于 2020-07-08 10:37:31 发布

guokanglun

最新推荐文章于 2020-07-08 10:37:31 发布

阅读量241

点赞数

分类专栏： DIV + CSS

本文链接：https://blog.csdn.net/gklcsdn/article/details/103410141

版权

DIV + CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

文章目录

1. 什么是css

层叠样式表，是一种为HTML文档添加样式的计算机语言（网页的衣服）

2. css的引用方式

（1）内部样式：在head标签中间新建一个style标签，用来存放css代码

<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>Document</title>
    <style>
        
    </style>
</head>

（2）外部样式：在head标签中间新建一个link标签，通过href属性设置外部css地址

<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>Document</title>
    <link rel="stylesheet" href="">
</head>

（3）行内样式：在开始标签内部设置一个style属性，用来存放css代码

<div style="width: 200px; height: 200px; background-color: red;"></div>

3. 常用元素选择器

选择器作用：精确选中元素，越精确优先级越高

<body>
    <div class='main'>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <p>123</p>
    </div>
</body>

（1）后代元素选择器（最常用）
由外到内一层一层写，中间用空格隔开

  .main li {
      color: red;
  }

（2）子元素选择器
选中的是儿子元素，选不到后面的元素，如下：只能选中第一个ul

.box > ul{

}

    <div class='box'>
        <ul>
            <li></li>
            <li></li>
        </ul>

        <div>
            <ul>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

（3）相邻元素选择器
只有C为红色（选择最接近该元素的元素）

    <div class='box'>
        <ul>
            <li>A</li>
            <li class='second'>B</li>
            <li>C</li>
            <li>D</li>
        </ul>

    </div>

        .second+li {
            color: red;
        }

（4）兄弟元素选择器
CD均为红色（选择与该元素同级指定的所有元素）

        .second~li {
            color: red;
        }

兄弟元素选择器和相邻元素选择器都只选择该元素下面的元素
相邻元素 +
兄弟元素 ~
（5）标签名选择器

div{
	color: red;
}

4. 样式优先级

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

行内样式优先级最高
浏览器从上往下解析代码（后面覆盖前面）

5. 命名规范

见名知义

规范：
1、不能是拼音
2、不能用单独某一个英文字母
3、不能用单独的数字
4、不能以数字开头，可以数字结尾
5、不能出现汉字
6、禁止广告类命名，包括英文单词广告
7、不能使用下划线，可以使用连字符-

6. 选择器优先级

ID > class > 标签名选择器

同类型选择器：个数越多优先级越高

guokanglun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 基本样式与元素选择器以及命名规范

1. 什么是css层叠样式表，是一种为HTML文档添加样式的计算机语言2. css的引用方式（1）内联样式：在head标签中间新建一个style标签，用来存放css代码<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...
复制链接

扫一扫

专栏目录