前端入门学习笔记（十四）CSS入门（二）CSS 规则与选择器

最新推荐文章于 2024-08-04 14:27:56 发布

TUTsmile

最新推荐文章于 2024-08-04 14:27:56 发布

阅读量183

点赞数 1

分类专栏： CSS 文章标签：前端入门 CSS入门 CSS基础前端基础前端三件套

本文链接：https://blog.csdn.net/TUTsmile/article/details/82987923

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS语法

CSS是由浏览器解释的样式规则,然后应用于文档中相应的元素。
样式规则有三个部分：选择器，属性和值。
例如，标题颜色可以定义为：

        h1{color: red;}  
        选择器{ 属性: 值;}
        selector{property:value;}

需要设置多个属性的时候，可用分号将其分隔开，如

h1{
	color: red;
	background: gray;
}

再用webstorm进行编写时，颜色会在侧边栏显示出来

类型选择器

例如要定位全部的段落（CSS声明全以分号结尾，声明组由大括号结尾）

        p {
            color: red;
            font-size:130%;
        }

id和class选择器

id选择器允许您设置具有id属性的HTML元素，而不管它们在文档树中的位置。这里是一个id选择器的例子：

使用“#”符号，后跟ID名

CSS部分
 #idSelect {
	color: white;
	background: gray;
}

HTML部分
<div id="idSelect">
    <p> div 会用于标记区域、标记HTML文档的各部分</p>
</div>
<p> 在div内的类型会受到影响</p>

代码效果

class选择器以类似的方式工作。主要区别在于id只能每页应用一次，而class可以在页面上多次使用。
并且CSS部分略有写不同：

使用"."符号，后跟类名

.cssSelect{
    color: white;
    background: gray;
}

<html>
<head>
    <style>
        .cssSelcet {
            color: white;
            background: gray;
        }
    </style>
</head>
<body>
<div>
    <p class="cssSelcet">class可以</p>
    <p>class可以 </p>
</div>
<p class="cssSelcet"> 在页面中多次使用</p>
<p>在页面中多次使用 </p>
</body>
</html>

代码效果

后代选择器

选择另一个元素的后代的元素如示例代码中，要选择“intro”的“first”中的“emFirst”以及“emSecond”

<html>
<head>
    <style>
        #intro p {
            color: pink;
            background-color: black;
        }

        #intro .first em-first {
            /*css代码命名多为-，非驼峰或_命名*/
            /*em 为 Emphasized text（强调文本的缩写）*/
            color: white;
            background-color: gray;
        }

        #intro .first em-second {
            color: gray;
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="intro"><!--id 为父元素属性，子元素才可使用first属性 -->
    <p class="first">div父元素内，first内
        <em-frist>emFirst内</em-frist>
        <em-second>emSecond内</em-second>
    </p>
    <p class="first">div父元素内，first内，无em</p>
</div>
<p class="first">div元素外，first内，<em>em内</em></p>
<p class="first">div元素外，first内，无em</p>
</body>
</html>