前端开发之CSS入门篇
一、CSS介绍和语法
二、CSS引入方式
三、基本选择器
四、高级选择器
五、伪类选择器
六、伪元素选择器
1️⃣ CSS介绍和语法
1、 CSS的介绍
（1）为什么需要CSS？
使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离 在没有CSS之前，
我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，
并且修改的时候需要逐个修改，费心费力。而此时CSS就出现了。
CSS的出现解决了以下问题：
首先，将HTML页面的内容与样式的分离；其次，提高了Web开发的效率。 （2）什么是CSS？
CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。
也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。
（3）CSS的优势
一是内容与表现分离；二事网页的表现统一，容易修改；三是丰富的样式，使页面布局更加灵活；
四是减少网页的代码；五是运用独立页面的CSS，有利于网页被搜索引擎收录。 （4）如何使用CSS？
通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，然后在HTML文件中
通过link标签引用该CSS文件即可。这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该
文件中的样式规则渲染HTML文件。 2、CSS语法
（1）CSS基础语法
CSS语法分为两部分：
选择器和声明
声明由属性和值组成，多个声明之间用分号隔开。
语法：
选择器｛
声明1；
声明2；
声明3；
｝ 例如：
h2{
color:green;
font-size:20px;
}
（2）代码注释
方法：/*代码注释写在这里*/
2️⃣ CSS引入方式
网页中引入CSS样式有三种：
1、内联样式
2、行内样式表
3、外部样式表
①链入式
②导入式
（1）内嵌方式
style 标签
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的引入方式1</title>
<!--CSS引入的方式一-->
<style>
h2{
color:green; /*这是注释*/
font-size: 20px;
}
</style>
</head>
<body>
<div>
<h2>这是二号标题</h2>
</div>
</body>
</html>
（2）行内样式
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的引入方式2</title>
</head>
<body>
<div>
<p style="font-size: 30px;color:red">这是一个段落标签</p>
</div>
</body>
</html>
（3）外联样式表--链接式
link 标签
例如：index.css为css样式表文件
index.css文件如下
p{
color:pink;
font-size:30px;
}
然后在HTML文件中通过link标签引入，语法：<link rel="stylesheet" type="text/css" href="index.css"/>
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css_1</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<div>
<p >这是一个段落标签</p>
</div>
</body>
</html>
（4）外联样式表--@import url()方式 导入式
同样导入index.css
语法如下：
<style>
@import url(index.css);
</style>
注意：@import url() 必须写在文件最开始的位置
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css_1</title>
<style>
@import "index.css";
</style>
</head>
<body>
<div>
<p >这是一个段落标签</p>
</div>
</body>
</html>
链接式与导入式的区别：
1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
3️⃣ 基本选择器
1、何为选择器？
在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，
某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，
找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围。
2、基础选择器的种类
（1）标签选择器
（2）ID选择器
（3）类选择器
（4）通用选择器
2.1 标签选择器
顾名思义，标签选择器就是通过标签名来选择元素。
示例：
<style>
p{
color:red;
font-size:30px;
}
</style>
表示将所有的p标签设置字体颜色为红色，字体大小为30像素。
2.2 ID选择器
通过元素的ID值选择元素。
语法：
<style>
#select{
color: gold;
font-size: 30px;
}
</style>
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css_1</title>
<style>
#select{
color:gold;
font-size: 30px;
}
</style>
</head>
<body>
<div id="select">
<p >这是一个段落标签</p>
</div>
</body>
</html>
2.3 类选择器
（1）所谓类就是class,.class与id非常相似，任何的标签都可以加类，类是可以重复的，我们要学会归类；
（2）同一个标签中可以带有多个类，用空格隔开，有公共类的概念；
（3）不要试图用一个类将我们的页面写完，这个标签可以携带多个类，设置共同的样式；
（4）每个类要尽可能的小，有公共的概念，能够让更多的标签通过样式类选择元素。
语法：
.c1{
color:orange;
}
// 注意，类选择器名称前面用点“.”与其他选择器区分。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css_1</title>
<style>
.c1{
color: orange;
font-size: 30px;
}
</style>
</head>
<body>
<div class="c1">
<p >这是一个段落标签</p>
</div>
</body>
</html>
2.4 通用选择器
使用 “ * ”选择所有元素。
语法：
*{
color:pink;
}
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css_1</title>
<style>
*{
color: #1b9dec;
}
</style>
</head>
<body>
<div >
<p >这是一个段落标签</p>
</div>
<div>
<p>这是另一个段落标签</p>
</div>
</body>
</html>
4️⃣ 高级选择器
1、高级选择器的种类
① 并集选择器：多个选择器通过逗号连接而成，同时声明多个风格相同样式。
② 交集选择器：有两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格，
第一个必须是标签选择器。第二个必须是类选择器或者ID选择器。
③ 后代选择器：外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔标签嵌套时，
内层的标签称为标签的后代。
④ 子元素选择器：通过“>”连接在一起而成，仅作用于子元素。
⑤ 属性选择器：选择带有指定属性的元素，或选取带有指定属性和值的元素。
⑥ 毗邻选择器：找到所有紧挨在选择器后面的第一个选择器，设置属性。
⑦ 弟弟选择器：找到所有紧挨在选择器后面同级的选择器，设置属性。
2、并集选择器
<style>
h3,h4{
color:red;
font-size: 20px;
}
</style>
3、交集选择器（第一个必须是标签选择器，第二个必须是类选择器或者ID选择器。）
① 第一个为标签选择器，第二个为ID选择器。
<style>
p{
width: 120px;
font-size: 25px;
}
#sect1{
color:blue;
}
p#sect1{
font-style: italic;
font-family: "Adobe 宋体 Std L";
}
</style>
② 第一个为标签选择器，第二个为类选择器。
<style>
h3{
width: 200px;
color:orange;
}
.sect2{
font-size: 20px;
}
h3.sect2{
background-color: #1b9dec;
}
</style>
4、后代选择器
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css_1</title>
<style>
<!--方法1：-->
div p{
color: red;
font-size: 30px;
}
<!--方法2：-->
div div p{
color:green;
}
<!--方法3：-->
.box div p{
color: blue;
}
</style>
</head>
<body>
<div class="box">
<div>
<p>后代选择器1</p>
</div>
<p>后代选择器2</p>
</div>
</body>
</html>
5、子代（子元素）选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css_1</title>
<style>
/*<!--子代选择器-->*/
div>p{
font-size: 30px;
color: #1da7ee;
} </style>
</head>
<body>
<div>
<p>子代选择器</p>
</div>
</body>
</html>
6、属性选择器
（1）方式一：根据属性查找
<style type="text/css">
label[for]{
color:greenyellow;
font-size: 20px;
}
input[type]{
width: 80px;
color:greenyellow;
}
</style>
<!--属性选择器-->
<div>
<form action="">
<p><label for="user">用户名：</label>
<input type="text" name="" id="user">
</p>
<p>
<label for="pwd">密码：</label>
<input type="password" name="" id="pwd">
</p> </form>
</div>
（2）方式二：根据属性和值查找
<style type="text/css">
①/* <!--查找所有属性与指定的属性值相同的元素-->*/
label[for="pwd"]{
color: red;
font-size: 25px; }
②/* <!-- ^ 查找找到所有属性对应的属性值以指定值开头的元素-->*/
label[for^="VIP"]{
color: darkred;
font-size: 28px;
}
③/* <!-- $ 表示查找所有属性对应的属性值以指定值结尾的元素-->*/
label[for$="2"]{
color:pink;
}
④/*<!-- * 表示查找标签所有属性中包含（字符串包含）指定值的元素-->*/
label[for*="user"]{
color:#5bc0de;
font-size: 18px;
}
⑤/*<!--查找标签所有属性(有多个值或值以空格分割)中有一个值为指定值的元素-->*/
input[type~="submit"]{
color:royalblue;
height: 25px;
} </style>
<div>
<form action="">
<p><label for="user">用户名：</label>
<input type="text" name="" id="user">
</p>
<p>
<label for="pwd">密码：</label>
<input type="password" name="" id="pwd">
</p>
<p>
<label for="VIP1">vip1等级</label>
<label for="VIP2">vip2等级</label>
</p> <p>
<label for="user2">用户名2：</label>
<label for="user3">用户名3：</label>
</p> <p>
<input type="text" name="" size="30px" placeholder="输入关键词">
<input type="submit" name="" width="3px" placeholder="搜索">
</p> </form>
</div>
5️⃣ 伪类选择器
<style type="text/css">
/*<!--没有访问过的超链接a标签样式-->*/
.test ul li.item1 a:link{
color:orange;
}
/*<!--访问过的超链接a标签样式-->*/
.test ul li.item2 a:visited{
color: yellowgreen;
}
/*<!--鼠标悬停在元素上的应用样式-->*/
.test ul li.item3 a:hover{
color: #93fff3;
}
/*<!--鼠标点击瞬间的样式-->*/
.test ul li.item4 a:active{
color: #ffc2d9;
}
/*<!--input输入框获取焦点时样式-->*/
.test ul li.item5 input:focus{
outline: #b4ffc2;
background-color: #dae3ff;
} /*<!--选中任一一个(从0开始，但0表示什么都没选)-->*/
.test ul li:nth-child(2){
font-size: 8px;
color:darkgray;
}
/*<!--n表示选中所有，0表示什么都没选-->*/
.test ul li:nth-child(n){
font-family: "Adobe 楷体 Std R";
font-size: 30px;
}
/*<!--选中偶数-->*/
.test ul li:nth-child(2n){
font-size: 20px;
}
/*<!--选中奇数-->*/
.text ul li:nth-child(2n-1){
font-size: 30px;
}
/*<!--隔几换色-->*/
.test ul li:nth-child(4n+1){
/*<!--每隔3个换一种-->*/
font-size: 40px;
color: #fdffb5;
}
</style> <div class="test">
<ul>
<li class="item1">
<a href="#">没有访问过的超链接a标签样式</a>
</li> <li class="item2">
<a href="#">访问过的超链接a标签样式</a>
</li> <li class="item3">
<a href="#">鼠标悬停在元素上的应用样式</a>
</li> <li class="item4">
<a href="#">鼠标点击瞬间的样式</a>
</li> <li class="item5">
<input type="text" name="" placeholder="在此处输入">
</li> <li class="item6">
<a href="#">我是倒数第二个</a>
</li> <li class="item7">
<a href="#">我是最后一个</a>
</li> </ul>
</div>
完整案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器（“爱恨原则love hate”）</title>
<style type="text/css">
/*<!--没有访问过的超链接a标签样式-->*/
.test ul li.item1 a:link{
color:orange;
}
/*<!--访问过的超链接a标签样式-->*/
.test ul li.item2 a:visited{
color: yellowgreen;
}
/*<!--鼠标悬停在元素上的应用样式-->*/
.test ul li.item3 a:hover{
color: #93fff3;
}
/*<!--鼠标点击瞬间的样式-->*/
.test ul li.item4 a:active{
color: #ffc2d9;
}
/*<!--input输入框获取焦点时样式-->*/
.test ul li.item5 input:focus{
outline: #b4ffc2;
background-color: #dae3ff;
}
/*<!--选中第一个元素-->*/
.test ul li:first-child{
font-size: 25px;
color:brown;
}
/*<!--选中最后一个元素-->*/
.test ul li:last-child{
font-size: 25px;
color: #a195ff;
}
/*<!--选中任一一个(从0开始，但0表示什么都没选)-->*/
.test ul li:nth-child(2){
font-size: 8px;
color:darkgray;
}
/*<!--n表示选中所有，0表示什么都没选-->*/
.test ul li:nth-child(n){
font-family: "Adobe 楷体 Std R";
font-size: 30px;
}
/*<!--选中偶数-->*/
.test ul li:nth-child(2n){
font-size: 20px;
}
/*<!--选中奇数-->*/
.text ul li:nth-child(2n-1){
font-size: 30px;
}
/*<!--隔几换色-->*/
.test ul li:nth-child(4n+1){
/*<!--每隔3个换一种-->*/
font-size: 40px;
color: #fdffb5;
}
</style>
</head>
<body>
<div class="test">
<ul>
<li class="item1">
<a href="#">没有访问过的超链接a标签样式</a>
</li> <li class="item2">
<a href="#">访问过的超链接a标签样式</a>
</li> <li class="item3">
<a href="#">鼠标悬停在元素上的应用样式</a>
</li> <li class="item4">
<a href="#">鼠标点击瞬间的样式</a>
</li> <li class="item5">
<input type="text" name="" placeholder="在此处输入">
</li> <li class="item6">
<a href="#">我是倒数第二个</a>
</li> <li class="item7">
<a href="#">我是最后一个</a>
</li>
</ul>
</div>
</body>
</html>
6️⃣ 伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
/*<!--为文本的首字母设置特殊样式-->*/
p:first-letter{
color: #6f42c1;
font-size: 20px;
}
h3:first-letter{
color:yellowgreen;
font-size: 25px;
}
/*!*<!--在元素的内容前面插入新内容（注意，要配合content属性使用）-->*!*/
p:before{
content: "hello";
font-family: "Adobe 宋体 Std L";
}
h3:before{
content: "world";
font-family: "Microsoft YaHei UI";
}
/*!*<!--在元素的内容后面插入新内容（注意，要配合content属性使用），使用很频繁-->*!*/
p:after{
content: "every";
font-size: 30px;
}
h3:after{
content: "one";
font-size: 30px;
}
span{
font-size: 50px;
color:cornflowerblue;
}
</style>
</head>
<body>
<!--<div>-->
<!--<p>这是伪元素选择器</p>-->
<!--<h3>这是一个段落</h3>-->
<!--</div>-->
<div>
文档文档 文档文档<span>文档</span>文档文档文档文档文档文档
文档文档文档文档文档文档
<img src="fav.ico" alt=""><img src="fav.ico" alt=""><img src="fav.ico" alt="">
<img src="fav.ico" alt="">
<img src="fav.ico" alt="">
</div>
</body>
</html>
前端开发之CSS入门篇的更多相关文章
- 前端开发之css篇
一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作 二.c ...
- 前端开发之CSS篇四
一.相对定位 二.绝对定位 三.固定定位 四.z-index 前言 定位有三种:1.相对定位 2.绝对定位 3.固定定位 这三种定位,每种都暗藏玄机,所以要每个单独剖析. 1️⃣ 相对定位 1.三 ...
- 前端开发之CSS篇三
主要内容: 一.CSS布局之浮动 二.清除浮动带来的问题 三.margin塌陷问题和水平居中 四.善用父级的的padding取代子级的margin 五.文本属性和字体 ...
- 前端开发之CSS篇二
主要内容: 一.CSS的继承性和层叠性 二.盒模型 三.padding属性 四.border属性 五.margin属性 六.标准文档流 七.行内元素和块状元素转换 1️⃣ CSS的继承性和层叠性 1 ...
- 前端开发之javascript BOM篇
主要内容: 1.BOM输出 2.BOM的对象 3.client的相关属性 4.offset的相关属性 5.scroll的相关属性 前情提要: 何谓BOM? 所谓 BOM 指的就是浏览器对象模型 Bro ...
- 前端开发之css
<!--页面中的组成部分通常随便打开一个网页,有文字,图片,视频,表格,音频,表单(注册信息) css 属性/尺寸/边框/背景 1.css的尺寸属性,就是大小width max-width mi ...
- 前端开发之JavaScript基础篇四
主要内容: 1.定时器 2.正则表达式入门 3.元字符 4.正则表达式实战运用 一.定时器 javaScript里主要使用两种定时器,分别是:setInterval()和setTimeout(). 1 ...
- 前端开发之JavaScript基础篇三
主要内容: 1.创建对象的几种方式 2.JavaScript内置对象 3.JavaScript错误--Throw.Try 和 Catch 4.JavaScript 表单验证 一.创建对象的几种方式 1 ...
- 前端开发之JavaScript基础篇一
主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换 ...
随机推荐
- JavaScript 定时任务多事件冲突问题
var iCount = setInterval(ChangeTime, 3500);//3.5秒请求一次函数 function ChangeTime() { $.ajax({ type: " ...
- [MEF]第01篇 MEF使用入门
一.演示概述 此演示初步介绍了MEF的基本使用,包括对MEF中的Export.Import和Catalog做了初步的介绍,并通过一个具体的Demo来展示MEF是如何实现高内聚.低耦合和高扩展性的软件架 ...
- bzoj4806 炮
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4806 这种题应该想状压的. 于是发现压不下,结合每一行每一列最多放两个炮想到记一下放炮的列就 ...
- 20 几个知名公司的 Java 面试题汇总
查看不同公司新鲜真实的Java面试题,摘自Glassdoor.com 巴克莱投资: 假设有一个 getNextparson() 方法返回 Person 对象,Person 类实现了 comparabl ...
- CArray，CList，CMap如何实例化
1.定义一个CMap,向这个CMap中增加数据项(键-值对).CMap<CString, LPCTSTR, CString, LPCTSTR>m_ItemMap;CString strKe ...
- Go的List操作上的一个小“坑”
转自http://sharecore.net/blog/2014/01/09/the-trap-in-golang-list/ 一直想不清楚一个问题,简单设计的东西到底是“坑多”还是“坑少”呢? 复杂 ...
- Arduino+A4988驱动两相四线步进电机
先吐槽一下,在某宝买东西这么多年碰到的不靠谱的卖家也没这几天多.丝杆发短,42电机只有32大,碳杆上的鱼眼粘的没法再歪了还死紧……所以组装还得几天.于是先玩了一下DC-DC降压模块和A4988,规划了 ...
- UUID是如何保证全局唯一的
UUID由以下几部分的组合: (1)当前日期和时间,UUID的第一个部分与时间有关,如果你在生成一个UUID之后,过几秒又生成一个UUID,则第一个部分不同,其余相同. 据说时间粒度很 ...
- Linux 发展史
操作系统 英文名称为operating system,简称os,是应用程序运行及用户操作必备的基础环境支撑,计算机系统的核心,作用是管理和控制计算机系统中的硬件和软件资源 操作系统就是处于用户与计算机 ...
- AOP 动态织入的.NET实现
AOP(面向切面编程:Aspect Oriented Programming)为诸如日志记录.性能统计.安全控制.事务处理.异常处理等与具体业务逻辑无关,却需要在全局范围进行执行的功能提供了一种良好重 ...