前端知识之CSS(1)-css语法、css选择器（属性、伪类、伪元素、分组与嵌套）、css组合器
前端基础之css
1.关于css的介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，也就是给HTML标签修改样式。
当浏览器读取到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
可能我们还会看到css3，后面这个数字指的是它的版本号
css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式（css语言代码也可以直接写在html文件中）
采用的语言是级联样式表 （Cascading Style Sheet），也属于标记语言。
2.css语法
1.每个css样式由俩个部分组成：选择器和声明，声明又包括属性和属性值，每个声明之后要以分号作为结束
2.语法结构
选择器 {
属性名1:属性值1;
属性名2:属性值2;
}
3.注释语法
/*注释内容*/
3.三种编写CSS的方式
css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行内式、内部式和外部式三种。
1.head中style标签内部直接编写(学习阶段使用 方便)
2.head中link标签引入外部css文件(最正规)
3.直接在标签内部通过style属性编写(不推荐)
3.1.style内部直接编写css代码
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
color: red;
}
</style>
</head>
3.2.link标签引入外部css文件
外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css真正的.css">
</head>
3.3.标签内直接书写
<body>
<h1 style="color: blue">热死个人</h1>
</body>
4.css四个基本选择器(标签选择器、类选择器、id选择器、通用选择器)
因为同一个页面上有很多相似的标签 并且这些标签在不同的位置有不同的样式 所以为了能够区分 我们肯定先需要学习如何查找指定的标签
/*1.标签选择器:直接编写标签名来查找标签*/
div {
color: green; /*查找所有的div标签 并将内部的文本颜色变为绿色*/
}
/*2.类选择器:通过编写class的值来查找标签*/
.c1 {
color:red; /*查找所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/
}
/*3.id选择器:通过编写id的值来精准查找标签*/
#d1 {
color: aquamarine; /*查找id值是d1的标签 并将内部的文本颜色改为天青色*/
}
/*4.通用选择器:查找所有的标签*/
* {
color: blue; /*查找所有的标签 并将内部的文本颜色改为蓝色*/
}
5.css组合器(重点)
为了区分嵌套标签之间的关系，我们发明了一种称呼
<div>div
<span>div里的span</span>
<p>div里的p
<span>div里的p里的span</span>
</p>
<span>div里的span</span>
</div>
<span>与div同层的span1</span>
<span>与div同层的span2</span>
<span>与div同层的span3</span>
/*
span是p的儿子 是div的孙子也可以说是div的后代
p是div的儿子也是div后代 是span的父亲
div是p的父亲是span的爷爷 也可以说是他们的祖先
*/
5.1.后代选择器(特征为空格)空格的意思就是后代
/*查找div标签内部所有的span(后代)*/
/*1.后代选择器: 两个选择器之间空格隔开 查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签*/
<style>
div span{
color: orchid;
}
</tyle>
5.2.儿子选择器(特征>)
/*查找div标签内部所有的儿子span*/
/*2.儿子选择器 两个选择器之间大于号隔开 查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签*/
<style>
div > span {
color: orange;
}
</syle>
5.3.毗邻选择器(特征为+)
/*查找div标签同级别下面紧挨着的一个span标签(弟弟)*/
/*3.毗邻选择器*/
<style>
div + span {
color: aqua;
}
</style>
5.4.弟弟选择器(特征为~)
/*查找同级别下面所有的span(不需要紧挨着)*/
<style>
div ~ span {
color: deeppink;
}
</style>
6.css属性选择器
所有的标签除了有自己默认的属性之外 还可以拥有自定义的任意属性
<p id="d1" class="c1" name="jason" pwd="123">123</p>
6.1.查找属性名含有name的标签
<style>
[name] {
background-color: lightpink;
}
</style>
<body>
<input type="text" name="username" placeholder="username">
<input type="text" name="password" placeholder="password">
<a href="" name="username" value="321">我是a标签</a>
<div name="username">我是div</div>
</body>
6.2.查找属性名含有name并且值是username的标签
<style>
[name='username'] {
background-color: antiquewhite;
}
</style>
<body>
<input type="text" name="username" placeholder="username">
<input type="text" name="password" placeholder="password">
<a href="" name="username" value="321">我是a标签</a>
<div name="username">我是div</div>
</body>
6.2.查找input标签并且 属性名含有name值是username的
<style>
input[name='username'] {
background-color: cadetblue;
}
</style>
<body>
<input type="text" name="username" placeholder="username">
<input type="text" name="password" placeholder="password">
<a href="" name="username" value="321">我是a标签</a>
<div name="username">我是div</div>
</body>
7.css选择器之分组与嵌套
7.1.当多个选择器查找到的标签需要调整相同的样式，那么可以合并
当多个选择器查找到的标签需要调整相同的样式，那么可以合并
<style>
div,span,p { /*查找div或者span或者p*/
color: red;
}
</style>
7.2.并且合并的选择器彼此不干扰也没有类型的限制
<style>
div,#d1,.c1 { /*标签查找div id查找d1 类查找c1*/
color: red;
}
</style>
7.3.不并列同样可以使用组合选择器
<style>
.c1 p { /*查找class为c1的后代p标签*/
color: red;
}
</style>
7.4.还可以在选择器基础之上添加额外的选择使得查找更精确
<style>
div#d1 { /*查找id为d1的div标签*/
color: red;
}
</style>
<style>
div.c1 { /*查找class为c1的div标签*/
color: red;
}
</style>
8.css选择器之伪类选择器
a标签默认的颜色有两种 紫色跟蓝色
紫色:链接地址已经被点击过了
蓝色:链接地址从来没有点击过
8.1.:hover(鼠标悬浮在上面会发送变化）
<style>
a:hover{
color: deeppink;
}
</style>
<body>
<a href="" name="a" value="321">我是a标签,鼠标未停留</a><br>
<a href="" name="b" value="321">我是a标签，鼠标停留</a>
</body>
8.2.:focus(聚焦状态）
<style>
[name]:focus {
background-color: cadetblue;
}
</style>
<body>
<input type="text" name="username">
</body>
8.3.:link(未访问状态）
<style>
a:link{
color: lightpink;
}
</style>
<body>
<a href="css基本选择器.html">我是a链接</a>
</body>
8.4.:active(选定的链接）
<style>
a:active{
color: darkorange;
}
</style>
<body>
<a href="css基本选择器.html">我是a链接</a>
</body>
8.5.:visited(以访问的状态）
a:visited{
color: darkorange;
}
</style>
<body>
<a href="css基本选择器.html">我是a链接</a>
</body>
9.css选择器之伪元素选择器(first-letter、before、after)
伪元素选择器可以用在解决标签浮动所带来的的负面影响 也可以用来做数据的防爬
<style>
p:first-letter{
/*设置第一个字的大小、颜色*/
font-size: 48px;
color: green;
}
p:before{
/*在文本前面添加信息*/
content:"歌词：";
color:salmon;
}
p:after{
/*在文本后面面添加信息*/
content:"结束了";
color: cornflowerblue;
}
</style>
<body>
<p>
想着你的感觉，有如风的缠绻，吹乱我的日夜，吹也吹不走你的容颜
</p>
</body>
10.css选择器优先级
10.1.相同选择器不同导入方式(相同距离优先)
相同选择器不同导入方式(相同距离优先)
选择器系统遵循就进原则 从上往下谁离标签更近谁说了算
就近原则
2.选择器不同的情况
行内 > id选择器 > 类选择器 > 标签选择器
!important
10.2.不同选择器不遵循就近原则>>>:优先级
不同选择器不遵循就近原则>>>:优先级
行内选择器 > id选择器 > 类选择器 > 标签选择器
!important
10.3.!important
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试Css中的!Important区别</title>
</head>
<style type="text/css">
.testClass{
color:blue !important;
}
</style>
<body>
<div class="testClass" style="color:red;">
<!-- 虽然元素的style中有testClass类的定义，但是在上面的css定义中的用!important限定的定义却是优先级最高的-->
测试Css中的Important
</div>
</body>
</html>
无论是在ie6-10或者Firefox和Chrome表现都是一致的，都显示蓝色。
这种情况也同时可以说明ie6是可以识别!important的，只是这个是ie6的一个缺陷吧。如果写成下面的样式，ie6是识别不出来的：
.testClass{
color:blue !important;
color:red;
}
当然，也可以通过以下方式来让ie6识别：
.testClass{
color:blue !important;
}
.testClass{
color:red;
}
通过以上方式也是可以让ie6显示成蓝色的。
前端知识之CSS(1)-css语法、css选择器（属性、伪类、伪元素、分组与嵌套）、css组合器的更多相关文章
- css伪类伪元素
在CSS中,模式(pattern)匹配规则决定哪种样式规则应用于文档树(document tree)的哪个元素.这些模式叫着选择符(selector). 一条CSS规则(rule)是选择符{属性:值; ...
- CSS学习摘要-语法和选择器
主要摘自网络开发者. 从最基本的层次来看,CSS是由两块内容组合而成的: 属性(Property):一些人类可理解的标识符,这些标识符指出你想修改哪一些样式,例如:字体,宽度,背景颜色等. 属性值(V ...
- 3 CSS 定位&浮动&水平对齐&组合选择符&伪类&伪元素
CSS Position(定位):元素的定位与文档流无关 static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中 静态定位的元素不会受到top,bottom,left,right影 ...
- css伪类 伪元素
之前写了一篇 <详解 CSS 属性 - :before && :after> 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正 ...
- CSS篇-样式表、选择器、权重、伪类
CSS定义 CSS:Cascading Style Sheet(层叠样式表) // 写法 选择器 { 属性名: 属性值; } CSS样式表 (1)三种样式表使用 // 内联样式 <div sty ...
- 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- css样式（二）（伪类 | 伪元素 | 导航 | 图像拼合 | 属性选择器 ）
一.rgb值: RGBA 颜色 RGBA 颜色值得到以下浏览器的支持:IE9+.Firefox +.Chrome.Safari 以及 Opera +. RGBA 颜色值是 RGB 颜色值的扩展,带有一 ...
- css中伪类/伪元素详解
一.伪类和伪元素 伪类和伪元素都是用来修饰不在文档树中的部分,区别在于, 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active). ...
- 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器
今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
随机推荐
- cloudwu/coroutine 源码分析
1 与其它协程库使用对比 这个 C 协程库是云风(cloudwu) 写的,其接口风格与 Lua 协程类似,并且都是非对称 stackful 协程.这个是源代码中的示例: #include " ...
- 【SpringSecurity系列1】基于SpringSecurity实现前后端分离无状态Rest API的权限控制
源码传送门: https://github.com/ningzuoxin/zxning-springsecurity-demos/tree/master/01-springsecurity-state ...
- Linux 运行升讯威在线客服系统：同时支持 SQL Server 和 MySQL 的实现方法
前段时间我发表了一系列文章,开始介绍基于 .net core 的在线客服系统开发过程. 有很多朋友一直提出希望能够支持 MySQL 数据库,考虑到已经有朋友在用 SQL Server,我在升级的过程中 ...
- 云原生存储解决方案Rook-Ceph与Rainbond结合的实践
基础不牢,地动山摇.无论是何种体系架构,底层存储的选择都是一个值得探讨的话题.存储承载着业务的数据,其性能直接影响到业务应用的实际表现.也正因为存储和业务的数据关联紧密,其可靠性也必须得到关注,存储的 ...
- 粗谈对ajax的理解
ajax:Asynchronous JavaScript and XML异步JavaScript和XML技术Asynchronous:JavaScript:XMLHttpRequestXML:实现数据 ...
- Intel的CPU系列说明
至强可扩展系列是英特尔推出的新一代至强处理器系列,如今距离该系列推出几乎过去一年了.新的CPU并没有延续E系列的命名,英特尔将至强可扩展系列以金属命名,将该系列分为"铂金Platinum&q ...
- Java 17 中的模式匹配与和类型
Java 17 中的模式匹配与和类型 从 Spring Security 获取用户谈起 使用 Spring Security做用户校验和权限控制时,常常使用和线程绑定的容器来获取当前登录用户. // ...
- CA证书、自颁发证书、自签名证书联系
一.理论基础 ssl:secure socket layer(安全套接层协议)的缩写,通过此协议可以保证两个应用通信的可靠性和保密性.openssl:是ssl协议的实现.提供了对称加密算法.非对称加密 ...
- 04 MySQL_数据相关的SQL
字符编码问题: 如果使用Windows电脑SQL语句中写中文报错的话,通过以下指令解决 set names gbk; 判空NULL问题: 判值用=,判空用is xxx = 非空值; xxx is nu ...
- highcharts图表及报表展示、导出数据
@ 目录 前言 一.使用highcharts前后端交互展示图表,及使用报表导出 二.实现思路 1.图表可以选择echarts.highcharts,我们这里选择highcharts(echarts使用 ...