【Web前端HTML5CSS3】——CSS语法与选择器（超级全面）
目录
一、CSS语法
1. CSS简介
内联样式（行内样式）
内部样式表
外部样式表
2. CSS基本语法
注释
基本语法
3. CSS选择器
常见选择器
复合选择器
关系选择器
属性选择器
6. 伪类选择器
7. 伪元素选择器
CSS Dinner（餐厅游戏）
一、CSS语法
1. CSS简介
层叠样式表
- 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层
- 总之一句话，CSS用来设置网页中元素的样式
- 使用CSS来修改元素样式的方式大致可以分为3种
内联样式（行内样式）
<p style="color:red;font-size:60px;">内联样式（行内样式）</p>
- style（样式）:在标签内部通过
style属性来设置元素的样式 - color（颜色）
- font-size（字体-大小）
- 问题：使用内联样式，样式只能对一个标签生效。
- 如果希望影响到多个元素，必须在每一个元素中都复制一遍
- 当样式发生变化时，我们必须要一个一个的修改，非常的不方便。（注意：开发时绝对不要使用内联样式）
内部样式表
<head>
<style>
p{color:green; font-size:50px;
}
</style>
</head>
- 将样式编写到
head中的style标签里然后通过css的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式，并且修改时只需要修改一处即可,内部样式表更加方便对样式进行复用 - 问题：我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用
外部样式表
p{color:pink;font-size:520px;}上面表示在一个后缀为.css的文件中输入样式表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet"href="./1.css">
</head>
<body><p>我是p</p>
</body>
</html><link>（连接）：rel(relationship)、stylesheet（样式表）表示样式调用、href属性值写相对路径
- 外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用使样式，可以在不同页面之间进行复用
- 将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。
2. CSS基本语法
常见属性
font-size：字体大小，一般单位为px（像素），不同浏览器字体默认大小可能不同，所以全 文字体都要改大小，用body{}等改大小时，h标签的大小不会改变，要另外用h{}改 大小
font-family：字体类型，有空格的字体类型要用“”包裹，如“Microsoft YaHei”
有的电脑上会没有一些字体，所以此属性值可以有多个，用逗号隔开，前面的 字体没有时会用后面的字体
font-weight：字体粗细属性值有默认为normal，bold（粗体）等不常用，常用数字作为属性 值，400等同于normal，700等同于bold，注意数字无单位
font-style：字体风格分为normal和italic（斜体）
line-height:行高（一行的间距，包括上间距、文字高度、下间距），单位带不带px都可以
复合属性：可以把font属性写到一起，但必须依照严格的顺序，不同属性间用空格隔开，其 中font-size和font-family是必须写的,否则font不起作用
顺序为：font: font-style font-weight font-size/line-height font-family，例：
body{ font: italic 700/20 16px “Microsoft yahei” }color：颜色，最常用十六进制
background-color：背景颜色
text-align：文本对齐，有三个属性值分别为left，center，right
text-decoration：文本装饰
text-indent：段落首行缩进，单位px、em（当前段落一个文字的大小）
display：可以转换块元素、行内元素、行内块元素
属性为display，属性值分别为block、inline、inline-block
注释
css中的注释只能使用/*和*/包裹。即不管是单行注释，还是多行注释，都是以/*开头，以/*结尾
/* css中的单行注释 *//*
css中的多行注释
css中的多行注释
css中的多行注释
*/
html中的注释
只能使用<!--和-->包裹。即不管是单行注释，还是多行注释，都是以<!--开头，以-->结尾
<!-- html中的单行注释 --><!--
html中的多行注释
html中的多行注释
html中的多行注释
-->
基本语法
选择器
通过选择器可以选中页面中的指定元素
- 比如p的作用就是选中页面中所有的p元素声明块
声明块
通过声明块来指定要为元素设置的样式
- 声明块由一个一个的声明组成，声明是一个名值对结构
- 一个样式名对应一个样式值，名和值之间以:连接，以;结尾
h1{color: green;
}3. CSS选择器
常见选择器
元素选择器
也叫类型选择器、标签选择器
- 作用：根据标签名来选中指定的元素
- 语法：elementname{}
- 例子:p{}
p{color: red;
}h1{color: green;
}
ID选择器
- 作用：根据元素的
id属性值选中一个元素 - 语法:#idname{}
- 例子:#box{}
#red{color: red;
}类选择器
- 作用：根据元素的class（用法和id相同，但多个标签可以有相同class，且一个标签中的class可以有多个属性值，之间用空格隔开）属性值选中一组元素
- 语法:.classname
- 例子:.blue{}
.blue{color: blue;
}
.size{font-size: 20px;
}通配选择器
- 作用：选中页面中的所有元素
- 语法:*
- 例子:*{}
*{color: red;
}
另一种用法
<head><meta charset="UTF-8"><title>Document</title><style>h1 *{color:red;}</style>
</head>
<body><p>h1外面的p</p><h1>不变红<p>h1中的p</p></h1><h1>也不变红</h1>
</body>效果
h1 *（中间有空格）表示选中h1中的标签
复合选择器
并集选择器
- 作用：同时选择多个选择器对应的元素
- 语法：选择器1,选择器2,选择器3,选择器n{}
- 例子:#a,.b,div.red{}
h1,span{color: green;
}交集选择器
- 作用：选中同时复合多个条件的元素
- 语法：选择器1.选择器2.选择器3.选择器n{}
- 注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头
div.red{font-size: 30px;
}.a.b.c{color: blue;
}关系选择器
父元素：直接包含子元素的元素叫做父元素
子元素：直接被父元素包含的元素是子元素
祖先元素：直接或间接包含后代元素的元素叫做祖先元素；一个元素的父元素也是它的祖先元素
后代元素：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素
兄弟元素：拥有相同父元素的元素是兄弟元素
子元素选择器
- 作用：选中指定父元素的所有指定子元素
- 语法：父元素>子元素（>子子代元素）
- 例子：div>span
后代元素选择器
- 作用：选中指定元素内的指定后代元素
- 语法：祖先元素 后代元素
- 例子：div p
兄弟元素选择器
- 作用：选择挨着的下一个兄弟
- 语法：上一个兄弟+下一个兄弟
- 例子：span+h1
兄弟元素选择器2
- 作用：选择不一定挨着的所有该名兄弟
- 语法：一个兄弟~某个兄弟
- 例子：h3 ~ h5
HTML
<div><span<p>p</p></span><span>span</span><h1>h1</h1><h1>第二个h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><h5>h5</h5>
</div>
CSS
div>span{color:pink;}/*子元素选择器，*/
div p{font-size:100px;} /*后代元素选择器*/
span+h1{color:blue;}/*兄弟元素选择器，找同级挨着的下一个元素*/
h3 ~ h5{color:yellow;}/*选中h3后的所有h5元素*/
效果
属性选择器
作用：根据元素的属性值选中一组元素
语法1：[属性名]
作用：选择含有指定属性的元素
语法2：[属性名=属性值]
作用：选择含有指定属性和属性值的元素
语法3：[属性名^=属性值]
作用：选择属性值以指定值开头的元素
语法4：[属性名$=属性值]
作用：选择属性值以指定值结尾的元素
语法5：[属性名*属性值]
作用：选择属性值中含有某值的元素
HTML
<p title>我爱范范1</p>
<p title="abc">我爱范范2</p>
<p title="abcdefg">我爱范范3</p>
CSS
p[title]{color:orange;}
p[title=abc]{font-size:100px;}/*此abc无引号*/
p[title^=abcd]{color:red;}/*^表示以abcd（属性值）开头的title（属性名）*/
p[title$=g]{font-size:60px;}/*$表示以g结尾的title*/
p[title*=l]{}/**表示属性值中有l就会被选中*/
效果
6. 伪类选择器
伪类（不存在的类，特殊的类）
伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素.…
伪类一般情况下都是使用:开头
- :first-child：第一个元素 子元素:first-child 选中第一个子元素
- :last-child：最后一个元素
- :nth-child()：选中第n个元素
- n：第n个，n的范围0到正无穷
- 2n或even：选中偶数位的元素
- 2n+1或odd：选中奇数位的元素
以上这些伪类都是根据所有的子元素进行排序的
- :first-of-type：同类型中的第一个子元素
- :last-of-type：同类型中的最后一个子元素
- :nth-of- type：选中同类型中的第n个子元素
这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的
- :not()：否定伪类，将符合条件的元素从选择器中去除
HTML
<ul><li>第一个</li><li>第二个</li><li>第三个</li><li>第四个</li><li>第五个</li><p>第一个p</p><p>第二个p</p>
</ul>
CSS
ul > li:first-child/*li必须是ul的第一个子元素才好使，但child变成type就表示第一个li子元素*/{color:red;}ul > li:last-child/*因为li不是ul的最后一个元素，所以不变色*/{color:green;}ul > li:nth-child(3)/*括号里填n表示所有，2n和even表示偶数，2n+1和odd表示奇数*/{color:pink;}ul > p:not(:nth-of-type(2)){color:aqua;}
效果
<a>的伪类
:link：未访问的链接
:visited：已访问的链接，由于隐私的原因，所以此伪类只能修改链接的颜色
:hover：鼠标悬停的链接
:active： 鼠标点击的链接
HTML
<a href="https://www.bilibili.com">bilibili</a><br>
<a href="https://www.1.com">未打开过的网站</a>CSS
a:link/*表示所有链接*/
{color:red;
}
a:visited/*表示打开过得链接，优先显示*/
{color:aqua;
}
a:hover/*表示鼠标触碰的链接，不止链接*/
{color:yellow;
}
a:active/*表示点击时变化，不止链接*/
{color:fuchsia;
}
- 注意： 上面a的伪类使用时必须按照严格的顺序LVHA，即link、visited、hover、active的顺序
- 想要给a链接改变样式，要单独设置a{}改变，比如设置body{}是改变不了a的样式的
效果
悬停时
点击时
7. 伪元素选择器
伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用::开头
::first-letter：表示第一个字母
::first-line：表示第一行
::selection： 表示选中的内容
::before：元素的开始
::after：元素的最后
::before和::after必须结合content属性使用
HTML
<p>伪元素指一些特殊的不存在的特殊元素（不存在的位置）</p>CSS
p::first-letter/*同理：：first-line*/
{font-size: 50px;
}
p::selection/*表示选中的元素*/
{color:blue;
}
p::before{content:'『'
}
p::after{content:'』'
}效果
选中的元素
8.focus选择器
<input type="text" /><input type="text" /><input type="text" /><style>input:focus{background-color:red;
}
</style>
CSS Dinner（餐厅游戏）
CSS Dinner是一个帮助初学者快速熟悉css各种选择器的网页游戏
点击进入CSS Dinner
点击查看CSS Dinner答案
CSS中遇到的新选择器
:only-child：子元素:only-child 选中唯一一个子元素
:only-of-type
:nth-last-child()
:nth-of-child(An+B)：选中第B,B+n，B+2n......个元素
:empty：选中没有子元素的元素
【Web前端HTML5CSS3】——CSS语法与选择器（超级全面）相关推荐
- Web前端之CSS语法与选择器
目录 一.CSS简介 层叠样式表 1.内联样式(行内样式) 2.内部样式表 3.外部样式表 二.CSS基本语法 注释 css中的注释 我们对比下其他几种前端语言的注释 html中的注释 JS(Java ...
- 【Web前端HTML5CSS3】04-CSS语法与选择器
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 文章目录 CSS语法与选择器 1. CSS简介 层叠样式表 内联样式(行内样式) 内部样式表 外部样式表 2. CSS ...
- 冬季小学期 NIIT公司 web前端培训 CSS
外边距合并 http://www.w3school.com.cn/css/css_margin_collapsing.asp div.p.h1 块元素 span行元素 浮动:浮动的框可以向左或向右移动 ...
- canvas clear 指定属性的元素_好程序员web前端分享CSS属性组成及作用
好程序员web前端分享CSS属性组成及作用 学习目标 1.css属性和属性值的定义 2.css文本属性 3.css列表属性 4.css背景属性 5.css边框属性 6.css浮动属性 一.css属性和 ...
- Web前端HTML+CSS全套（1~20）
Web前端HTML+CSS全套(1~20) 拨云见日 CSS基础 切图流程 PC企业站布局 PC游戏站布局 溯本求源 HTML扩展 CSS扩展 HTMLS新语法 CSS3新语法 兼容与hack 风生水 ...
- Web前端HTML+CSS零基础入门知识总结
目录 HTML.CSS零基础入门 一.HTML网页基本结构 1.1实体 1.2HTML常用标签 文本标签 列表标签(三者可嵌套使用) 图片标签 meta标签 超链接 1.3内联框架 二.CSS基本内容 ...
- Web前端，CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
前言 持续总结输出中,今天分享的是Web前端,CSS中关于块级元素.行内元素.行内块元素.元素显示模式转换.CSS特性继承性和层叠性 1.块级元素 特点: 独占一行(一行只能显示一个) 宽度默认是父元 ...
- 前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...
- web前端之css快速入门
css:又称层叠样式表 具体英文单词(好吧,我又不是学英文) w3c,中文也称之为万维网.网页地址:http://www.w3school.com.cn/ 里面包最详细的教程,但是前提你愿意花费那么多 ...
- 小白学Java Web 3 Web前端之CSS基本知识2
这一篇接着上一篇的内容来分享,上一篇还有大量的样式属性没有列出,不过在继续分享之前,我想先来分享一下关于网页的布局相关的一些东西,因为下一篇我打算分 享用仅仅前面三小篇的内容来制作一个简单的静态网页, ...
最新文章
- 2017-2018-1 20155202 《信息安全系统设计基础》第9周学习总结
- 自动驾驶出行，进入下半场
- Tensorflow LSTM时间序列预测的尝试
- linux 查看服务器性能常用命令
- java基础之匿名内部类
- 【转】wpa_supplicant与wpa_cli之间通信过程
- [设计模式-行为型]访问者模式(Vistor)
- python关闭对象语法_用Python打开和关闭文件
- 谷歌探月大赛确定29支队伍 最高奖金2000万美元
- ELK filebeat和logstash使用：配置单个文件来源、配置多个文件来源
- eclipse安卓插件ADT下载地址
- Java实现极光推送
- 电感的两种模式——DCM和CCM的区别
- [词根词缀]quarr/qui/quit/rad/radi等衍生单词
- 简单粗暴理解【阿姆达尔定律】
- 公众平台 python_微信公众平台SDK Python
- 台式机计算机不能睡眠,台式电脑为什么不能睡眠了？
- Unknown column ‘id‘ in ‘field list‘ 【排错·sql】
- 观察者模式的一个例子
- java.util.StringTokenizer