02css基本样式与元素选择器

最新推荐文章于 2024-09-11 10:34:35 发布

宠儿呀

最新推荐文章于 2024-09-11 10:34:35 发布

阅读量191

点赞数

分类专栏： html+css笔记

本文链接：https://blog.csdn.net/qq_46055080/article/details/104235020

版权

html+css笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

02css基本样式与元素选择器

1.定义

层叠样式表（Cascading Style Sheets，简写CSS），是一种用来为HTML文档添加样式（字体、间距、位置、颜色、角度等显示效果）的计算机语言。
HTML是内容的展示，CSS是内容的装饰。

CSS中的代码注释格式采用的是：/* 注释文字 */。快捷键: Ctrl+/ 注释一行 Ctrl+shift+/ /*注释多行 */
css图片

2.命名规范

① 必须以字母开头命名选择器，这样可保证在所有浏览器下都能兼容；
② 不允许单个字母的类选择器出现；
③ 不允许命名带有广告等英文的单词，例如ad、adv、adver、advertising，以防止该模块被浏览器当成垃圾广告过滤掉；
④ 一律小写；
⑤ 尽量用英文；
⑥ 不加中杠和下划线；
⑦ 尽量不缩写，除非一看就明白的单词。

（注：U盘中有相关文件–>企业命名规则）

3.引用方式

（1）行内样式（不推荐使用）

在开始标签的内部可以设置一个叫做style的属性，属性的双引号内存放该元素代码的CSS样式。只针对当前标签生效，写重复样式就会很影响效率。例：

<div style="color:blue;">天青色等烟雨，而我在等你。</div>

（2）内部样式（在练习时使用）

在head标签中间新建一个style标签，该标签内部存放的就是网页文件中的CSS代码。

<head>
<style> /*h1{}*/</style>
</head>

（3）外部样式（推荐使用, 结构与表现互相分离, 更清晰, 更整体）

在head标签中间新建一个link标签，通过href属性设置外部CSS文件地址。rel是relationship的缩写（指定当前文档与被链接文档的关系）rel=“stylesheet”表示我们引用的是一个样式表（CSS）文件。
例：

<link rel="stylesheet" href="css/index.css">

注：href和src的定义与区别
1.href (Hypertext Reference)网络资源的位置，浏览器识别当前资源是一个样式表，页面解析不会暂停（由于浏览器需要样式规则去渲染页面，渲染过程可能会被被暂停）。这与把css文件内容写在<style>标签里不相同，因此建议使用link标签而不是@import来把样式表导入到html文档里。
2.src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置，在浏览器下载、编译、执行这个文件之前页面的加载和处理会被暂停。这个过程与把js文件放到<script>标签里类似。这也是建议把JS文件放到底部加载的原因。当然，img标签页与此类似。浏览器暂停加载直到提取和加载图像。

注：关于 URL(Uniform Resource Locator) 统一资源定位符：统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
结构：模式（或称协议）+ 服务器名称（IP地址）、路径和文件名。例如：https://segmentfault.com/a/1190000002877022。带有授权部分的普通统一资源标识符。
分类: 绝对URL和相对URL（以包含URL本身的文件夹的位置为参考点）

4.基本格式

（1）元素标签命名的基本格式

选择器：选择元素的器具或是工具

①标签选择器：h1-h6，div，span，p，ul，li，ol，dl，a，img等等

.h1 {
      color:blue;
    }

②类选择器：在标签中添加一个属性，class=“类名”，理解为：取的别名。class命名的元素使用: . + 元素名称。

<h1 class="leaf">叶的飘落，是风的追求还是树的不挽留？</h1>

③id选择器：使用: # + 元素名称，来找到一个元素。具有唯一性，体现在操作js的时候。

#fly{
      color: green;
    }

注：id选择器和类选择器区别：

① W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

② 类选择器，好比人的名字，是可以多次重复使用的，比如张伟、王伟、李伟、李娜。

③ id选择器，好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

④ 为避免代码出现冲突，大骨架用id命名，里面的小结构用class。

（2）样式设置的基本格式

样式名称:样式值;
样式名称+冒号+样式值+分号
例：width:1000px;
注：所有符号皆为英文符号，不得使用中文符号

5.基本样式

❤尺寸：宽（width），高（height）等。

❤位置：水平（margin-left,margin-right）,垂直（margin-top,margin-bottom）上右下左

❤装饰：颜色（backgroud-color)。
颜色值三种写法：

1.颜色的单词；
2.rgb(0-255,0-255,0-255)；
3.十六进制数，三位或六位。

❤文字：大小（font-size）浏览器默认渲染14px，字体（font-family），颜色（color）等

6.常用复合选择器的使用

名称	详解
①交集选择器（"."）	交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如`h3.special`
②并集选择器(",")	任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式
③后代元素选择器(" ")	后代元素选择器是一个空格，空格前后各有一个选择器。作用是：找到空格前的选择器所选中的元素的后代元素中符合空格后选择器的要求的元素
④子代元素选择器(">")	大于号前后各有一个选择器。作用是：找到大于号前的选择器所选中的元素的子元素中大于号后选择器的要求的元素
⑤相邻元素选择器("+")	相邻元素选择器是一个+号，作用是：找到加号前的选择器所选中的元素紧跟其后第一个符合+号后选择器选中的元素。`<style>.main>ul~div{ backgroud-color:red;}</style>`
⑥兄弟元素选择器("~")	兄弟元素选择器是一个_{号，作用是：找到}号前的选择器所选中的元素紧跟其后所有符合~号后的选择器选中的元素`<style>.main>ul~div{backgroud-color:red;}</style>`