前端~CSS~层叠样式表/语法规范/基础/复合选择器的选择与使用

文章目录

CSS介绍

前端技术中，HTML是核心骨架，而CSS就是对html构建起来的骨架进行美化，生成“皮肉”。

CSS是层叠样式表（Cascading Style Sheets）
CSS能够对网页中的元素位置的排版进行像素级的精确控制，实现页面美化的效果。能够做到页面的样式和结构分离。

基本语法规范

CSS代码，由两个部分构成。

选择器{
属性：值；
}

选择器：决定针对哪个元素进行修改。
属性和值都是针对被选中的元素进行的~

CSS代码创建html文件即可写入。
（idea创建/记事本等等都可以）

代码示例：

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>CSSDemo</title><style>p{/*设置字体颜色*/color:blue;/*设置字体大小*/font-size:30px;}</style></head><body><p>
    hello world!
</p></body></html>

上述代码中style标签内写CSS代码，而style标签的位置不固定，可以在body标签中，也可以在body标签外，一般放到head标签内。
style标签中，p就是选择器，意思是选中下面代码中的p标签，里面的color和font-size就是属性，，后面的 red和30px就是值。意义是对下面所有的p标签进行修改，将颜色改为红色，字体大小改为30px.

原来效果：
在这里插入图片描述
CSS修改后的效果：

在这里插入图片描述

引入方式

内部样式表

写在style标签中，嵌入到html内部。
即上面提到的，将CSS选择器写在style标签，理论上style标签可以放在html任何位置，但是一般都是放到head标签中。

优点：
页面样式和页面结构分离。
缺点：
当CSS代码过多时，分离不彻底。

行内样式表（内联样式表）

通过style属性，来指定某个标签的样式。

<h3style="color: purple"> 热爱 </h3>

只针对当前标签生效，不能写复杂样式。

注意：

当内部样式和行内样式同时修改一个元素的属性时，行内样式的优先级更高。即style属性的优先级高于style标签。

外部样式表

当CSS进一步的复杂之后，就可以把CSS代码单独放入一个文件中，然后在html中单独引入。

<linkrel="stylesheet"href="Test.css">

使用link 标签来引入一个外部的CSS，link href属性描述了CSS的位置。rel属性表示引入的文件类型。stylesheet就表示“样式表”。

优点：样式和结构彻底分离。
缺点：
受到浏览器缓存的影响，修改之后不一定立刻生效。

关于缓存：这是计算机中常见的一种提升性能的手段。
网页依赖的资源（图片/CSS/JS等）通常是从服务器上获取的，如果频繁的访问该网站，那么这些外部资源就没必要反复从服务器获取，就可以使用缓存先存起来，存到本地磁盘上，从而提高访问效率。
当浏览器不显示最新版本的css文件时，可以ctrl+f5强制刷新页面。强制浏览器重新获取css文件。

语法细节

代码风格：
1）紧凑

 p { color: red; font-size: 30px;}

部署阶段，建议紧凑风格，减少不必要的空格/缩进/换行，达到节省带宽的目的。

2）展开

p {
    color: red;
    font-size: 30px;
}

开发阶段，建议展开风格，可读性好。

样式大小写
CSS不区分大小写。
所以css命名时一般使用脊柱命名法：font-size.

命名法：
驼峰：countNum.
蛇形命名法：count_num
脊柱命名法：count-num
匈牙利命名法：iuCountNum

选择器

选择器用于选中页面中指定的标签元素。
种类：

基础选择器

单个选择器构成
主要包含以下几种

标签选择器

标签选择器会选中某一类标签。
例如选择p标签，就会让整个页面中所有的p标签都被选中。

<style>p{/*设置字体颜色*/color: red;/*设置字体大小*/font-size: 24px;}</style>

如上，在选择器部分直接写入标签名，此时后面所有的p标签都会带有该样式。

类选择器
在CSS中创建“类”，通过该类指定哪些元素要遵守指定的样式。
类选择器是最常用的选择器

此处的“类” 是class属性，与Java中的类毫无关系。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{color: red;}/* CSS中 ， .开头的就是“类” */.green{color: green;}</style></head><body><div>俄罗斯</div><divclass="green">俄罗斯</div><div>俄罗斯</div><div>俄罗斯</div></body></html>

. 开头的表示是类。而点后面的名字就是类名。
在具体要应用选择器的元素上，通过class属性引入。
引入的时候，不需要加点

一个类可以被多个标签使用，一个标签也可以使用多个类。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{color: red;}/* CSS中 ， .开头的就是“类” */.green{color: green;}.font{font-size: 30px;}</style></head><body><div>俄罗斯</div><divclass="green">俄罗斯</div><div>俄罗斯</div><divclass="font green">俄罗斯</div></body></html>

在这里插入图片描述

id选择器
每个html元素都有一个id属性，要求整个属性是整个页面中唯一的值。

<style>#first{color: purple;}</style>

<divclass="green font"id="first">俄罗斯</div>

在这里插入图片描述

id 选择器相当于按照“身份证号”查找元素并赋予指定的样式。而类选择器相当于按照类别来找，一个类别下可以有很多元素，一个元素也可以属于多个类别（多对多关系）

通配符选择器
通配符选择器可以选中页面所有元素，一般使用的比较少，作用是消除浏览器默认的样式。

 *{
            background-color: yellowgreen;
        }

复合选择器

把多种基础选择器综合运用起来，通过组合，达到更精准更快速的定位元素的效果。

后代选择器
先指定一个父元素，然后再指定一个子元素~
或者子元素的子元素…

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>选择器练习</title><style>/*li{*//*    color:red;*//*}*/.red{color:red;}/* ol标签为父标签  li标签为子元素，这里选择将ol中的li设置为blue*/ol li{color: blue;}ol a{color:red;}</style></head><body><ul><li>俄罗斯</li><li>俄罗斯</li><li>俄罗斯</li></ul><ol><li>乌克兰</li><li>乌克兰</li><li>乌克兰</li><ahref="#">中国</a></ol></body></html>

后代选择器不仅可以是标签选择器的组合，也可以是其他任意基础选择器的组合。
如类选择器：

 .amra a{
            color:red;
        }

子选择器
只能选中子标签~

元素1>元素2{
属性：值
}
先找到元素1 在找到元素2.元素2必须是元素1 的子元素，不能是孙子元素或者其他…
子选择器和后代选择器非常类似。但也有一些不同，下面从代码中对比：

将猫改为红色

<divclass="cat"><ul><li><ahref="#">猫</a></li><li><ahref="#">猫</a></li><li><ahref="#">猫</a></li></ul></div>

<style>/*后代选择器*/.cat ul li a{color:red;}/*子选择器*/.cat>ul>li>a{font-size: 40px;}</style>

并集选择器
一次选中多个标签。

元素1，元素2{
属性：值；
}
同时将元素1 和元素2修改。
如下，将苹果香蕉橙子火龙果同时修改成 40px大小

<div>苹果</div><h3>香蕉</h3><ul><li>橙子</li><li>火龙果</li></ul><style>div,h3,ul>li{font-size: 40px;}</style>

伪类选择器

链接伪类选择器 和超链接标签a搭配使用。根据a标签的状态来选择。 a标签的几种状态： 1.未被访问过 : link 2.已经被访问过：visited 3.鼠标悬停 :hover 4.活动链接（点下去之后，没松手) :active

<ahref="http://www.sogou.com">搜狗</a><style>a{font-size: 30px;}/*a链接被访问过后的样式*/a:visited{color:green;}/*a链接未被访问时的样式*/a:link{color:black;}/*a链接鼠标悬停时样式*/a:hover{color:red;}/*a链接被点击时的样式*/a：active{color:blue;}</style>

上述几种状态中，link和visited是只有a标签才具有的状态
而hover和active标签是不仅仅a标签生效，其他标签也可以生效。

force伪类选择器

选取获取焦点的input表单元素。

<div><inputtype="text"><inputtype="text"><inputtype="text"><inputtype="text"></div><style>input:focus{color:red;}</style>

在这里插入图片描述

标签： html 前端 css

本文转载自: https://blog.csdn.net/Merciful_Lion/article/details/123296425
版权归原作者 白菜田田 所有，如有侵权，请联系我们删除。

前端~CSS~层叠样式表/语法规范/基础/复合选择器的选择与使用

文章目录

CSS介绍

基本语法规范

引入方式

内部样式表

行内样式表（内联样式表）

外部样式表

语法细节

选择器

基础选择器

复合选择器

发表评论

“前端~CSS~层叠样式表/语法规范/基础/复合选择器的选择与使用”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航