css初学笔记：css三种书写方式及基本选择器

2024-07-09 03:34| 来源: 网络整理| 查看: 265

css学习笔记：一：css书写使用； 1.行内式：直接书写在标签中的一个style属性中，属性值是包含所有的css样式属性。例如：我是div标签 2.嵌入式（内嵌式）：书写在head标签里一个style标签里。例如：

div{ width: 100px; height: 200px; background-color: blue； font-size：50px； }

3.外链式：通过link标签引入外部的css文件。 Css文件，拓展名.css。Css文件的样式可直接书写，不用style样式包裹。例如：书写header样式； 1.在css文件中写header样式：

` div{ width: 100px; height: 200px; background-color: blue； font-size：50px； } `

2>.在head标签里书写link标签

①Rel:css文件和html的关系，属性值“stylesheet”样式表。 ②Type：类型。属性值“text/css”表示css文件为纯文本。（type类型可省略不写） ③Href：路径。外部引入css文件的路径。 4.css一些杂项。 1.Css中键值对的书写语法： K：v k： key：属性名 v：属性值例如：width：200px；height：200px； 2.css中每一条样式属性以分号结尾。 3.css中每条属性独占一行，逐条书写。（便于我们初学者读自己代码） 4.css中对空格，缩进，换行不敏感。例如：

1，div{ width: 100px; height: 200px; background-color: blue； font-size：50px； } 2，div{ width: 100px;height: 200px;background-color: blue；font-size：50px； }

二，css选择器 1>标签选择器 1.书写：

我是一个div标签 div{ width: 200px； height：200px； }

2.标签选择器可以选中页面所有的同种标签，不管标签嵌套的多深，都可以选中。 3.用途： ①用于清楚或者重置默认样式。

div{ margin: 0; padding: 0; }

②清除ul列表小圆点。

ul{ list-style: none; }

③3.清除超级链接蓝色，下划线。

a{ color: black; text-decoration: none; }

2id选择器 ①Id选择器：通过标签的id属性进行选择。 ②Id属性值命名规则：严格区分大小写。(check!=CHECK)必须以字母开头，可以有数字和下划线，短横。 ③#id属性值 id属性名和#之间无空格。 ④一个网页中只能出现一个id名（id属性名唯一） ⑤同一个标签既可以被标签选择器选中，也可以被id选择器选中，设置不同的样式属性，渲染在页面上。（css的层叠性）。例如：

我是一个p标签

#tom{ width: 200px; height: 200px; font-size: 50px; font-family: "微软雅黑"; }

3类选择器 ①类选择器是通过标签的class属性进行选择。写法：类名（点和类名之间没有空格）类名命名规范和id属性的命名规范相同。例如：

我是一个p标签

.jack{ width: 100px; height: 100px; background-color: red; }

②使用注意点：类选择器的特殊应用：原子类，（公共类）。我们可以将一个类名只保存一个属性，某个元素想添加该类名，便于书写。例如：

.fs20{ font-size: 20px; }

给上述jack添加字号为20px：

我是一个p标签

【可以将原子类fs20添加给任何一个p标签，原子类可自己定义。实际运用要书写相同样式，可以直接书写相同类名。】（一个标签可以有多个类名，类名之间用空格隔开。） 4.通配符通配符会选中页面上所有的标签，甚至包括body. 用于：快速清除默认样式；例如：

*{ padding:0; margin:0; }

【本文地址】

公司简介

联系我们