CSS 初始化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS初始</title>
<!--
rel: relations 关联,指明关联的是stylesheet 样式表文档,表示link标签将会在html
文档初始化的时候被使用
type: css文本内容
href: css文件的地址; 本机地址: 要写相对路径; 网络地址: http(s)://. (//)
https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/static/css/index.chunk.css
-->
<link rel="stylesheet" type="text/css" href="">
<style>
span {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<!--
HTML: 超文本标记语言 HyperText Markup Language， 从语义化的角度描述页面
CSS: 层叠样式表 Cascading Style Sheets，从外观 审美的角度 改变页面的样式 外观
-1.行内样式
-2.外部引入/外联样式:
a.链接式： <link rel="stylesheet" href="">
b.导入式: @import, 写head标签的style标签内
<style>
@import "../style.css";
@import url(../style.css);
</style>
link和import的区别是什么?
- link 在html加载前就引用了
- import 在html加载后引用, 也就是先显示没有样式的页面,
然后再把样式加上，页面才正常显示
-3.内联样式:在head标签内直接使用 <style....</style>
优先级: 行内样式 > 内联样式 = 外联样式(谁后写，谁生效)
内外联: 都对span; 外: green, 内： red,
-->
<!-- 写在标签内的style叫 行内样式 -->
<span style="color: red">CSS 是层叠样式表</span>
<div></div>
<p></p>
<div>
<div>
<div>
<p></p>
</div>
</div>
</div>
</body>
</html>
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
span {
}
div {
}
p {
}
/*
一般是来初始化某一类自带样式的标签
*/
ul {
/*去掉无序/有序列表的小黑点或者 序号*/
list-style: none;
}
li {
/*配置文字颜色*/
color: red;
/*设置字体大小*/
font-size: 36px;
}
a {
/*超链接文本的颜色*/
color: black;
/*配置文本的下划线: none是没有下划线; underline*/
text-decoration: none;
}
</style>
</head>
<body>
<span>我是span标签</span>
<div>
<div>
<div>
<ul>
<li> <a href="#">鲁班</a> </li>
<li>后羿</li>
<li>孙尚香</li>
</ul>
</div>
</div>
</div>
<ul>
<li>瑶</li>
<li>凯</li>
<li>典韦</li>
</ul>
<a href="">百度一下</a>
</body>
</html>
id 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
/* 注释内容 */
#box-a {
color: red;
text-decoration: none;
}
/* id选择器 #id的名字(身份证号)
1.在同一个页面中，每个标签的id属性值必须是唯一的
2.id选择器尽量不要在css中使用
3.id主要是结合js来使用
*/
#box2 {
color: green;
font-size: 12px;
}
div {
color: red
}
</style>
</head>
<body>
<div>
第一层内容
<div id="box2">
第二层内容
<div id="box3">
<a href="" id="box-a">第三层内容</a>
<h1>一级标题</h1>
</div>
</div>
</div>
<p>
这是一个段落内容
</p>
</body>
</html>
类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
/*类选择器: .类名字*/
.box1 {
color: red
}
.box {
font-size: 36px;
}
</style>
</head>
<body>
<!-- class相当于人的名字 -->
<!-- 类选择器可以共同使用, 同一个标签可以有多个类名, 但是需要用空格隔开 -->
<div id="box-id" class="box1 box">
<a href="" class="box1">第一个盒子</a>
</div>
</body>
</html>
后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
/*1.后代选择器： 选中父元素box 下所有的span标签, 不区分儿子还是孙子,
只有有span就可以取出
*/
.box span {
color: gold;
}
.box .sun-zi {
text-decoration: underline;
}
.box .xiao-sun span {
}
/*2.子代(儿子)选择器
父元素>子元素(直接), 也就是亲儿子, 亲孙子也不行
*/
.box1 > .box2 {
text-decoration: underline;
}
.box1 > .box2>p {
color: red
}
.box1 > div > p {
color: red
}
</style>
</head>
<body>
<div class="box">
<div>
<p class="" ="xiao-sun">
<span class="sun-zi">孙子辈span</span>
<span>1111</span>
</p>
</div>
<span>儿子辈span</span>
<p class="xiao-sun"></p>
</div>
<div class="box1">
<div class="box2">
div第二层文本
<p>
第三层文本
</p>
</div>
<p class="box2">段落文本</p>
</div>
</body>
</html>
交/并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交并集选择器</title>
<style>
/*1.交集选择器:
当有多个相同类名的 【不同】类型的标签, 可以使用交集选择器给
其中一种标签设置单独的样式
*/
.box1 {
color: blue
}
div.box1 {
text-decoration: underline;
}
/*2.并集选择器*/
.box2, .box3 {
/*font-size: 50px*/
}
div, .box3 {
font-size: 50px
}
div.box2, span.box3 {
}
</style>
</head>
<body>
<!-- 交集 -->
<div class="box1">
第一个div的内容
<div>box1的亲儿子</div>
</div>
<div class="box1">
第二个div的内容
</div>
<p class="box1"> 段落文本</p>
<div class="box2">
box2的内容
</div>
<div class="box3">
box3的内容
</div>
<span class="box3">span的类名也叫box3</span>
</body>
</html>
通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<style>
/*
189****1234
通配符选择器: 一般用来初始化标签自带的内外边距;
cellpadding cellspacing
*/
* {
/*内边距 table cellpadding*/
padding: 0;
/*外边距 table cellspacing */
margin: 0;
}
div {
background-color: pink;
}
</style>
</head>
<body>
<div>
<a href="">第一个盒子</a>
</div>
<p>第一个</p>
<a href="">百度一下</a>
</body>
</html>
序选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>序选择器</title>
<style>
ul {
list-style: none;
}
/*选取第一个li*/
ul li:first-child {
color: red;
}
/*选取指定位置的li :nth-child(n) (n >= 1)*/
ul li:nth-child(1) {
font-size: 36px;
}
/*选取最后一个li*/
ul li:last-child {
color: green;
}
ul li:nth-child(2n - 1) {
background-color: pink;
}
ul li:nth-child(2n) {
background-color: orange;
}
.box a:nth-child(2) {
}
</style>
</head>
<body>
<ul>
<li>迪丽热巴</li>
<li>马尔扎哈</li>
<li>古力娜扎</li>
<li>迪丽热巴</li>
<li>马尔扎哈</li>
<li>古力娜扎</li>
</ul>
<div class="box">
<a href="">首页</a>
<a href="">百度百科</a>
<a href="">维基百科</a>
</div>
<a href=""></a>
</body>
</html>
下一个兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下一个兄弟选择器</title>
<style>
/* + 必须是紧紧挨着的兄弟元素*/
h1 + p + p + span {
color: red;
}
h1 + .first-p {
font-size: 36px;
}
.first-p + span {
color: aqua;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<p class="first-p">段落标签 </p>
<span>迪丽热巴</span>
<p>第二个p标签</p>
<span>古力娜扎</span>
<h1>第二个一级标题</h1>
<div class="first-p">
div中的 first-p
</div>
<span>马尔扎哈</span>
</body>
</html>
伪类和伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类 伪元素选择器</title>
<style>
a {
text-decoration: none;
}
/*伪类选择器*/
p:hover,a:hover {
text-decoration: underline;
font-size: 36px;
}
/*伪元素*/
.box {
background-color: pink;
width: 300px;
height: 300px;
height: 600px;
}
.box:before {
/*在box内部的最前面加一个 伪 元素
要添加的伪元素，它不存在与dom文档中, 是一个心创建的虚拟元素，
是一个元素的子元素，该子元素逻辑上存在，但不实际存在于文档中
*/
content: "迪丽热巴"
}
.box:after {
/*content: url(../../01_HTML/images/古诗词.webp);*/
content: "嘿嘿"
/*background-size: 50px;*/
}
.box:after {
/*content: url(../../01_HTML/images/古诗词.webp);*/
/*content: "哈哈哈22333";*/
content: "";
background-image: url(../../01_HTML/images/古诗词.webp);
background-size: cover;
width: 200px;
height: 200px;
display: block;
/*background-size: 50px;*/
}
</style>
</head>
<body>
<!--
1.伪类选择器
常用于 a 标签的 hover 效果
-->
<a href="" >百度一下</a>
<p>段落内容</p>
<!-- 2.伪元素/伪对象选择器
用于将特殊的效果添加到某些选择器中，其实是对那些不能通过类 id 选择器选择的元素的补充
-->
<div class="box">
<span>伪元素示例伪元素示例伪元素示例伪元素示例伪元素示例伪元素示例</span>
姓名<input type="text">
</div>
<!--
注意: 伪类和伪元素区别
- 伪类只能用一个英文冒号 :
- 伪元素/伪对象 既可以使用一个英文冒号, 也可以使用两个;
伪元素在一个选择器中只能出现一次
:after ::atfer 等效
:before ::before 等效
:before 和 :after 是CSS2的写法
::before 和 ::after 是CSS3的写法(H5开发中，建议使用 ::)
伪元素一定要结合 content 属性 一起使用
伪元素不会出现在dom树中，【所以它不能通过js操作】，仅仅实在css渲染层加入
-->
</body>
</html>
选择器权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器优先级(权重)</title>
<style>
/*
1.当使用不同选择器设置同一个标签的同一个样式，会根据选择器的优先级(权重)来决定最终按谁的样式显示。
也就是优先级高的优先显示
-- 优先级的权重规律
行内样式 1000
ID选择器 100
类选择器 10
标签选择器 1
通配符选择器 0
继承来的属性 没有优先级
*/
* {
color: orange;
}
#box1 {
/*id选择器权重值 100*/
color: pink !important;
font-size: 36px;
}
.box1 {
/*类选择器权重值 10*/
color: red;
}
/*12*/
/*body div.box2 {
color: aqua;
}*/
/*交集选择器*/
div.box2 {
/*div=== 1; .box2 === 10*/
color: orange;
}
/*后代选择器*/
div .box2 {
color: skyblue;
}
.box2 {
color: red;
}
div {
/*标签选择器权重值 1*/
color: green;
}
/*
2.在元素样式后加 !important , 该元素会获得最高权重, 这个方法只是增大了元素对应css属性的权重，
对所在的选择器没有任何影响
注意: 一旦使用了 !important ,元素样式将会很难该改变, 即使使用js也无法修改, 慎用！！！！;
*/
/*
3.当选择标签包含多种选择器时，需要将多个选择器的权重相加，权重总和大的优先更高
注意: 并集选择器除外;
*/
div .box3 {
font-size: 50px;
}
.box2, div.box3 {
font-size: 36px;
}
.box3 {
font-size: 16px;
}
</style>
</head>
<body>
<div id="box1" class="box1" style="color: blue; font-size: 50px">
<!-- /*行内样式权重值 1000*/ -->
我是div盒子
<span>div盒子中的span</span>
<!-- span内容的颜色为什么变了, 因为span本身是继承div的样式, 没有优先级；
而通配符选择器的权重值是0，不是没有优先级, 所以会优先执行通配符的样式 -->
</div>
<div class="box2">
太阳当空照
</div>
<div class="box3">
box3333
</div>
<!--
div .box2 {
}
-->
}
<div>
<div class="box2">
</div>
<p class="box2"></p>
<span class="box2"></span>
</div>
</body>
</html>
属性的继承性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css属性继承性</title>
<style>
a {
/*text-decoration: u;*/
}
div {
background-color: pink;
color: red;
font-size: 16px;
text-decoration: none;
text-align: center;
line-height: 50px;
}
.chunxiao {
font-size: 32px;
}
/*
继承性:
-- 字体属性 font-*(size weight color)
-- 文本属性 text-*(decoration align)
-- 行高 line-*（height）
行高=两条极限之间的距离
-- color
以上这些属性 都可以被【后代】继承
注意: a标签和 h系列的标签比较特殊;
a: 不会继承父元素的颜色,[下划线];
h系列: 大小不会继承
(所看到的大小变化，是因为h系列标签字体大小的单位是一个相对于父元素大小来变得 (em));
*/
</style>
</head>
<body>
春晓
<span class="chunxiao">春晓</span>
<h1>《春晓》</h1>
<div>
<h1>《春晓》</h1>
春眠不觉晓
<p>
处处蚊子咬
<span>夜来风雨声</span>
</p>
<a href="">花落知多少</a>
</div>
</body>
</html>
层叠性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠性</title>
<style>
/*1*/
a {
color: red;
}
/*11*/
.head a {
color: pink;
}
.nav a {
}
.nav-home a {
color: orange;
}
.head .nav .nav-home a {
color: blue;
}
/*
观察，首先先看看当前元素有没有被选中, 如果未选中权重0，如果选中了就按权重计算，权重大的优先显示(要注意选择器的类型)
*/
</style>
</head>
<body>
<div class="head">
<div class="nav">
<div class="nav-home">
<a href="">首页</a>
</div>
<div class="nv-ele">
家电
</div>
</div>
</div>
</body>
</html>
CSS 属性 文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS属性</title>
<style>
.cx {
/*border √ boder X*/
/*文本对齐方式 left center right*/
/*text-align: center;*/
/*有无下划线 none underline*/
text-decoration: underline;
/*行高 顶线 中线 基线 底线*/
line-height: 50px;
background-color: pink;
}
p {
/*文本首行缩进*/
text-indent: 32px;
}
span {
/*定义只有大写字母*/
/*text-transform: uppercase;*/
/*定义只有小写字母*/
/*text-transform: lowercase;*/
/*定义每个单词仅首字母大写*/
text-transform: capitalize;
}
</style>
</head>
<body>
<div class="cx">
<h1>春晓</h1>
<p><span>meng haO raN</span></p>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p style="text-indent: 2em">夜来风雨声，花落知多少。</p>
</div>
</body>
</html>
CSS属性 背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style>
.bg {
width: 600px;
height: 400px;
/*1.背景颜色
- 关键字:red black...
- 十六进制 #fffff #000000
- RGBA Red Green Blue Alpha(透明度) rgba( 8, 123, 13, 1)
*/
background-color: rgba(8, 123, 13, 1);
/*2.背景图片 background-image: url();
-引入: 背景图片超出容器的尺寸时, 超出部分会隐藏(img会溢出容器)
-平铺方式 background-repeat
-- no-repeat 不平铺
-- repeat-x: 只在水平方向上平铺;
-- repeat-y: 只在垂直方向上平铺;
-图片大小 background-size
--① 宽度px(和img呈现效果类似, 只设置宽度,那么高度会自适应等比例缩放)
宽度px 高度px(可能会导致图片变形)
--② 百分比 百分比(可能会导致图片变形且都是相对于父元素计算的)
百分比(默认就是宽的百分比, 宽度是相对于父元素计算的; 高度是自适应等比例缩放)
--③ cover 代表着会自动填满父元素的内容部分
-定位 backgroun-position: a b;
参数a: 水平移动的位置;
参数b: 垂直移动的位置;
参数值:
-- 单位px, 只有一个参数的时候, 默认是水平移动的位置, 垂直方向上会自动居中。
-- ① x% y%
x%是水平移动的位置(容器的宽度-背景图片的宽度) * x%
y%是垂直移动的位置(容器的高度-背景图片的高度) * y%
② *%,
*%是水平移动的位置(容器的宽度-背景图片的宽度) * *%
垂直方向上会自动居中
③ left center right
top center bottom
如果只设置了一个关键字, 则其他方向的值是center
-是否固定 background-attachment
-fixed
-scroll
-综合属性
background: url(../../01_HTML/images/古诗词.webp) no-repeat 100px 100px fixed;
background-color: red;
background-image: url();
background-repeat: no-repeat;
background-position:100px 100px;
background-attachment: fixed;
background-size?
*/
background-image: url(../../01_HTML/images/古诗词.webp);
background-repeat: no-repeat;
background-size: 300px;
background-position: right;
background-attachment: scroll;
}
</style>
</head>
<body>
<div class="bg">
<!-- <img src="../../01_HTML/images/古诗词.webp" alt=""> -->
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
CSS属性 字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体</title>
<style>
/*
字体: 大小 颜色 加粗 斜体 下划线 删除线 字体;
1.color 颜色 关键字 十六进制 rgba
2.font-size: px em(rem)
默认的浏览器字体大小是多少 16px, 浏览器支持的最小字体是 12px
3.加粗 strong b
font-weight bold normal
4.字体: font-family: "微软雅黑", "宋体", "黑体";
5.font-style: italic; 默认值 normal
*/
</style>
</head>
<body>
</body>
</html>
CSS属性 单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单位</title>
<style>
* {
padding: 0;
margin: 0;
}
body, html {
height: 100%;
}
/*1.宽高固定值: 像素 px pixel*/
div {
width: 1000px;
height: 30%;
background-color: red;
font-size: 2em;
}
a {
background-color: green;
width: 1000px;
height: 1000px;
}
/*2.宽高：占可视化窗口的百分比(vw vh)。
vw： viewport width， 1vw=视口宽度的1%, 100vw就是视口的宽度
vh： viewport height, 1vh=视口高度的1%，100vh就是视口的高度
注意: 支持css3的浏览器才支持vw vh 这两个长度单位
*/
/*3.em: 相对于父元素的字体大小;
4.父元素的 百分比
要给父元素设置一个高度，在div中，它的父元素是 body , body的父元素是 html,
html 的父元素是 可视化窗口,所以需要给body html 设置继承父元素的100%。
*/
</style>
</head>
<body>
<div>
123
</div>
<a href="">百度</a>
</body>
</html>
