CSS基础知识（一）

最新推荐文章于 2024-07-31 19:12:15 发布

Reagan_

最新推荐文章于 2024-07-31 19:12:15 发布

阅读量571

点赞数 2

分类专栏： web

本文链接：https://blog.csdn.net/Reagan_/article/details/80692028

版权

web 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

结构、样式、行为相分离

html css javascript

主流浏览器：市场份额高、必须有独立研发的内核
浏览器包括：shell、内核
shell：外壳，浏览器的操作类的展示页面；
内核：操作的路径、速度等等问题
包含：IE、Firefox、Google chrome、Safari、Opera
IE等主流浏览器的内核：看图

Ctrl+？==注释号

CSS部分;
css：cascading style sheet 层叠样式表
引入css：
1.行间样式，头标签加style=""
2.页面级css：在<head>里面写<style>标签
<style>
<div>{
}
</div>
</style>

3.外部css文件：专门建立一个css文件div,在html文件里用<link rel=stylesheet" type="text/css" href="lesson3.css"（超文本引用相对路径）

快捷输入方式；

打div：div+tab

打link：link+tab

选择器：
1.id 选择器：一一对应

2.class选择器：多对多

3.标签选择器：直接在css文件里选标签，eg：div那么所有的div都会被选择）

4.通配符选择器：*。*代表任意的，所有标签都会受影响
5.属性选择器
6.！important
7.伪类选择器

8.伪元素选择器

9. 父子选择器|派生选择器

10. 直接子元素选择器

11. 并列选择器

12. 分组选择器

选择器特点：
1.id 选择器：一一对应
2.class选择器：多对多
3.标签选择器：直接在css文件里选标签，eg：选div那么所有的div都会被选择）
4.通配符选择器：*，*代表任意的，所有标签都会受影响

覆盖问题：
1.id优先级高于class。
2.！important>行间样式>id>class|属性选择器（优先级一样，按前后顺序排，谁在后面听谁的）>标签选择器>通配符选择器。
3.css权重：看图256进制

通过计算权重来确定哪个覆盖哪个

权重值对应表：

示例：

1.父子选择器|派生选择器

父子结构来选中一部分，名称不一定是标签，也可以是内容，也可以是间接的，不一定是“父子结构”，也可以是“子孙结构”。

2.直接子元素选择器
div > em(em是一个示例) 表示div下的直接一层的子元素。

浏览器遍历父子选择器的顺序是从右向左的。
并列选择器：用多个限制条件选定一个元素，并且中间不加空格写到一起，但标签必须写到前面。
判断听谁的，只要写在同一行的选择器，将他们的权重相加。
权重一样时后面的覆盖前面的。
分组选择器：分开的组用逗号相连，这样共用一个款式（例如颜色）。
font-size：设置字体大小，设置的是字体的高。
font-weight：bold（==<strong标签>）；
从细到粗：lighter normal bold bolder 数字表达方式 100 200 300 400 --900。
font-style：italic（==<em>）
font-family:arial字体（有很多值，查css3）
color：三种写法：
1.纯英文单词（开发时严禁这种写法）
2.颜色代码（两种）
三原色：红绿蓝
每两位代表一个颜色，为十六进制，代表颜色的饱和度。
三组每个两位的数字都相同的话则可以简写。
3.颜色函数 rgb（0，0，0）；范围：0--255；
border：粗细实心空心颜色
1px solid （实心） black 符合属性
boder-width:20px;
border-style；solid（实体）、dotted（点状虚线）、dashed（条状虚线）。
透明色（跟背景一个色）：transparent。