目录
7.1 CSS 简介
-
什么是 CSS
-
CSS (Cascading Style Sheets) 是用来样式化和排版网页元素，例如更改网页内容的字体、颜色、大小和间距，将内容分割成多列或者加入动画以及别的装饰型效果。
-
-
功能
-
美化网页元素
-
网页元素布局
-
-
意义
-
结构与表现的分离
-
利于分工协作
-
-
版本
-
CSS 1.x
-
CSS 2.X
-
兼容性好
-
-
CSS 3
-
功能强
-
-
先睹为快
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/*
CSS规则
选择器: 确定要修饰的网页元素, 选择器内由一个或多个声明组成，之间用分号
声明: 决定元素所使用样式, 声明是由 属性:值;
*/
h1 {
color: white;
background-color: #936;
height: 48px;
line-height: 48px;
}
div {
width: 48px;
height: 48px;
background-color: #963;
border-radius: 4px;
position: fixed;
right: 20px;
bottom: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>css</h1>
<ul>
<li>修饰网页元素</li>
<li>网页元素布局</li>
</ul>
<h1>Hello,World</h1>
<div></div>
</body>
</html>
7.2 CSS 基本用法
-
规则
Ø 每个规则集(除了选择器的部分)都应该包含在成对的大括号({})里
Ø 在每个声明里，你应该用冒号（:）分离开属性与属性值。
Ø 在每个规则集里，你应该用分号（;）分离开各个声明
-
写法
-
内联样式
-
也称行内样式，是通过标签的style属性来设置元素的样式
-
用法
<div style="color:red; font-size:16px;"> 行内样式：16像素、红色</div>
-
特点
-
优点
-
优先级最高，针对性高
-
缺点
-
复用率低，可维护性低，没有实现结构与表现的分离
-
-
-
-
内嵌样式
-
就是将CSS代码集中嵌入在HTML文档的head头部的style标签中
-
用法 :
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>内嵌样式</title> <style> div{ color:red; font-size:16px; } /* 其他样式 */ </style> </head> <body> <div> 行内样式：16像素、红色</div> </body> </html> -
特点
-
优点
-
单页面下实现的样式的集中管理，最大程度的复用和维护
-
-
缺点
-
不利于多页面样式的复用和维护
-
-
-
-
外部样式
-
外部样式也叫链入式，是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中
-
用法
-
第1步：编写扩展名为.css的样式表文件
/* 选择器列表 */ div{ color:red; font-size:16px; } /* 其他样式 */ -
第2步：通过在html文档的head内添加link导入样式
<head> <meta charset="utf-8" /> <title>外部样式</title> <link rel="stylesheet" type="text/css" href="css文件路径" /> </head>
-
-
优点
-
最大程度的实现样式复用和维护
-
-
-
行内，内嵌
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h1 {
color: #fff;
background-color: #639;
}
</style>
</head>
<body>
<!-- 内嵌:
优点: 利于复用
缺点: 不利于多页面间复用 -->
<h1>CSS用法: 如何将CSS应用到网页元素中</h1>
<ul>
<li>行内样式: 通过style属性直接将样式写在标签上</li>
<li>内嵌样式：通过在head中添加style标签实现样式</li>
<li>外部样式: 样式以独立文件存在，通过link来导入外部的样式</li>
</ul>
<h1>Hello,world</h1>
<!--
优点: 直接，优先级最高
缺点: 不利于复用 ， 没有实现样式与元素的分离
-->
<h2 style="color: white; background-color: #396">行内样式</h2>
</body>
</html>
外嵌
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- href: css路径， 本地，也可以是远程, 同a标签href -->
<!-- rel : stylesheet -->
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<h1>外部样式</h1>
</body>
</html>
建立一个.css文件：
/*
外部样式文件，扩展名css
优点: 整个站点的复用，维护，分工协作
用法:
第1步：创建扩展名css的样式表文件 ，通常放在css文件夹中
第2步：在HTML文档导入css文件
link标签（必须放在head中）*/
h1{
color: white;
background-color: #693;
}
八、CSS 选择器
-
什么是选择器
-
选择器用于定位我们想要样式化的网页HTML元素
-
-
常用选择器
-
通配符选择器
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> /* 通配符选择器, 浏览器样式的初始化 */ * { color: red; } </style> </head> <body> <h1>通配符选择器</h1> <h2>标题2</h2> <h3>标题2</h3> <p>段落</p> </body> </html>
-
-
基本选择器
-
<style> /* 1、设置所有<h3>元素的文字颜色为#09f */ /* 标签选择器 : 选择器名称就是HTML标签名， 样式就会作用在所该标签 */ /* h3 { color: red; } */ /* 2、设置所有class为title的元素的文字颜色为#90f */ /* 类选择器 , 给标签添加class属性，再通过.+class的值设置规则 */ /* .title { color: red; } */ /* 3、设置id为box的元素的文字颜色#f90 */ /* id选择器 : 只会作用在网页中一个元素 , 给元素添加id属性，通过#+id的值来设置规则 */ /* css特性: css具备继承性 */ /* #box { color: red; } */ /* 设置所有<h2>、<dt>、class为title的元素的文字颜色为#9cf */ /* h2 { color: red; } dt { color: red; } .title { color: red; } */ /* 多个选择器使用同一种样式,可以通过,组合使用 */ /* h2, dt, .title { color: red; } */ /* 设置所有class为title的<h2>元素的文字颜色为#fc9 */ h2.title { color: red; } </style>
-
-
属性选择器
-
<style> /*结论： 标签[属性] => 包含属性 标签[属性=值] => 准确匹配 标签[属性(^$*)=值] => 模糊匹配 */ /* 1、设置有title属性的<h2>元素的文本颜色为#09f */ /* [] : 包含某个属性 */ /* h2[title] { color: red; } */ /* 2、设置class属性的值为odds的元素的文本颜色#90f */ /* [key=value] : 包含特定属性等于特定值的元素 */ [class='odds'] { color: red; } /* 3、改变title属性的值中以jp结尾的元素的文本颜色为#9f0 */ /* $=以结尾 */ /* [title$='jp'] { color: red; } */ /* 4、设置包含class属性，且title属性的值中含有y的<li>元素的文本颜色#f09 */ /* * : 包含 */ /*li[class][title*='y'] { color: red; }*/ </style>
-
-
层次选择器
-
<style> <!-- 1、设置#menu下的<span>元素的文字颜色为#09f 2、设置#menu下的子元素<span>的文字颜色为#90f 3、设置紧接在<h2>元素后的<dl>元素的文字颜色为#f09 4、设置<h2>元素之后的所有同辈元素<dl>的文字颜色为#9cf 结论： 同辈元素： +和~ 子元素： > 后代元素： 空格 --> /* 1、设置#menu下的<span>元素的文字颜色为#09f */ /* 空格: 后代选择器 */ /* #menu span { color: red; } */ /* 2、设置#menu下的子元素<span>的文字颜色为#90f */ /* > 子选择器 */ /* #menu > span { color: red; } */ /* 3、设置紧接在<h2>元素后的<dl>元素的文字颜色为#f09 */ h2 ~ dl { color: red; } </style>
-
-
过滤选择器
-
<style> <!-- 1、设置ul中第1个<li>元素的文本颜色为#09f 2、设置ul中最后一个<li>元素的文本颜色#90f 3、设置class不为three的<li>元素的文本颜色#f09 4、设置索引值为偶数的<li>元素的文本颜色#9f0 5、设置索引值大于1的<li>元素的文本颜色#9cf 6、设置所有第3个li元素的文本颜色为#9fc 7、设置每个ul中前3个li元素的文本颜色为#9fc 8、设置循环样式，第1、4、7颜色相同，第2、5、8颜色相同，第3、6、9颜色相同 结论： :nth-child(数字)：从1开始 indexOf :nth-child(数字n):数字的指定倍数 :nth-child(数字n + 数字):循环样式 lastIndexOf --> /* 1、设置ul中第1个<li>元素的文本颜色为#09f */ /* first-child nth-child : 索引从1开始 */ /* ul > li:nth-child(1) { color: red; } */ /* 2、设置ul中最后一个<li>元素的文本颜色#90f */ /* ul > li:last-child { color: red; } */ /* 3、设置class不为three的<li>元素的文本颜色#f09 */ /* :not(选择器) , 不等于括号里选择器 */ /* ul li:not(.three) { color: red; } */ /* 4、设置索引值为偶数的<li>元素的文本颜色#9f0 */ /* ul li:nth-child(2n) { color: red; } */ /* 5、设置索引值大于1的<li>元素的文本颜色#9cf */ /* n + 数字 : 从第几个开始 */ /* ul li:nth-child(n + 2) { color: red; } */ /* 、设置所有第3个li元素的文本颜色为#9fc */ /* ul li:nth-child(3) { color: red; } */ /* 7、设置每个ul中前3个li元素的文本颜色为#9fc */ /* ul li:nth-child(-n + 3) { color: red; } */ /* 8、设置循环样式，第1、4、7颜色相同，第2、5、8颜色相同，第3、6、9颜色相同 */ ul li:nth-child(3n) { color: red; } ul li:nth-child(3n + 1) { color: green; } ul li:nth-child(3n + 2) { color: blue; } </style>
-
-
表单选择器
-
<style> /* 1、所有单行文本框背景颜色改成#9cf */ /* [type='text'] { background-color: red; } */ /* 2、所有单行文本框获取焦点时背景色改成#9cf */ /* :focus */ /* input:focus { background-color: red; } */ /* 3、所有选中的单选项和复选项的宽和高设置为32px */ /* :checked { width: 32px; height: 32px; } */ /* invalid : 无效 */ input:invalid { background-color: red; } /* valid: 有效 */ input:valid { background-color: green; } </style>
-
-
伪类选择器
-
-
样式优先级
-
行内 > ID 选择器 > 类 > 标签
-
通过!important修改优先级
-
1953
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
