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

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 会用于标记区域、标记HTML文档的各部分

 在div内的类型会受到影响

代码效果

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

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

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

    



    
class可以
    
class可以 

 在页面中多次使用
在页面中多次使用 

代码效果

---

后代选择器

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

    



    
div父元素内，first内
        emFirst内
        emSecond内
    
    
div父元素内，first内，无em

div元素外，first内，em内
div元素外，first内，无em

代码效果如下