css基本使用规范（这个笔记CSS基本概念）

Cascading Style Sheet, 级联样式表HTML是网页的内容/骨架，我来为大家科普一下关于css基本使用规范?以下内容希望对你有帮助!

css基本使用规范

CSS基本概念

Cascading Style Sheet, 级联样式表

HTML是网页的内容/骨架

CSS是网页的外衣/表现

文件扩展名: .css

CSS写在哪

1. 行内样式表

<tagName style="css code here..." />

2. 内部样式表

<style>

selector {

css code here...

}

</style>

selector 称为选择器

3. 外部样式表

使用独立的.css文件

html页面使用link链接外部样式文件

优先级: 就近原则: 行内 > 内部 > 外部

选择器的一般写法

选择器名称 {

CSS属性: 值;

}

选择器的作用: 要控制谁?, 它是一种特征描述

CSS属性/值的作用: 要如何控制? 前景色/背景色/边框/间距/字体/...

html引用外部样式表的2种方式

1. 链接式

<link rel="stylesheet" type="text/css" href="css文件地址" />

2. 导入式

<style>

@import url("css文件地址");

</style>

如果在a.css中引用b.css, 使用@import

基本选择器

1. 标签/元素选择器

标签名称 {

}

自动应用于该类型的元素上.

2. 类选择器

.类名{

}

<tagName class="类名" />

3. ID选择器

#你定义的ID{

}

<tagName id="你定义的ID" />

在同一页面中,相同的ID只能出现一次!

优先级:

ID > Class > 标签选择器

强制提高优先级:

color: red !important;

样式表的继承

子元素自动继承父元素的样式, 但可能发生意外(例如浏览器给超链接设置的默认颜色为蓝色, 超链接从body那里继承得来的颜色是红色, 这时以蓝色为准)

交集选择器

E1E2{

}

例如: p.price{ }, 它命中的是这样的元素: <p class="price">

并集选择器

E1,E2{

}