css学习
css定义
<!-- css是层叠样式表,书写位置,title标签下方添加style双标签,style标签里面书写css代码 -->
<!-- 书写规则:选择器{属性名:属性值;} -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css定义</title>
<style>
/* 内部样式表 */
/* 书写位置 */
/* 选择器{} */
p {
/* css属性 */
/* 属性名:属性值; 成对出现->键值对*/
/* 调整字体颜色 */
color:blue;
/* 调整字号 */
font-size: 30px;
}
</style>
</head>
<body>
<p>体验css</p>
</body>
</html>
css引入方式
<!-- 外部样式表:开发使用 -->
<!-- css代码写在单独的css文件中 -->
<!-- 在html使用link标签引入 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css引入方式</title>
</head>
<body>
<!-- 引入外部样式表 rel:关系，样式表 -->
<link rel="stylesheet" href="./my.css">
<p>这是p标签</p>
<!-- 行内样式：配合JavaScript使用 -->
<div style="color: blue; font-size: 30px;">这是div标签</div>
</body>
</html>
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 选择同名标签设置相同的样式,无法差异化同名标签样式 */
p{
color:red;
}
/* 定义类选择器 */
.blue {
color: blue;
}
.size {
font-size: 20px;
}
/* 定义id选择器 */
#green {
color:green;
}
* {
font-size: 50px;
color:aqua;
}
</style>
</head>
<body>
<!-- 标签选择器 -->
<!-- 使用标签名作为选择器->选择同名标签设置相同的样式 -->
<!-- 例如：p,h1,div,a,img -->
<p>这是p标签</p>
<p>hhh</p>
<!-- 类选择器 见名知意，多个单词可以用-连接-->
<!-- 查找标签，差异化设置标签的显示效果 -->
<!-- 步骤定义类选择器->类名 -->
<!-- 使用类选择器->标签添加class="类名" -->
<!-- 一个类选择器可以给多个标签使用 -->
<!-- 一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开 -->
<div class="blue size">这是div标签</div>
<p class="blue">这是p标签</p>
<div>这是div标签</div>
<!-- id选择器 同一个id选择器在一个页面只能使用一次-->
<!-- 查找标签，差异化设置标签的显示效果 -->
<!-- id选择器一般配合JavaScript使用 -->
<!-- 步骤：定义id选择器->#id名 -->
<!-- 使用id选择器->标签添加id = "id名" -->
<div id="green">这是div标签</div>
<!-- 通配符选择器 （制作网页的初期->用来清除网页的默认样式）-->
<!-- 查找页面所有标签，设置相同样式 -->
<!-- *不需要调用，浏览器自动查找页面所有标签，设置相同样式 -->
<div>这是div标签</div>
<ul>
<li>li标签</li>
</ul>
<strong>strong</strong>
</body>
</html>
画盒子
<!-- 使用合适的选择器画盒子 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画盒子</title>
<style>
/* width 宽度
height 高度
background-color 背景色 */
.red {
width: 100px;
height: 100px;
background-color: brown;
}
.orange {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<!-- 差异化的两个盒子 -->
<div class="red">div1</div>
<div class="orange">div2</div>
</body>
</html>
文字控制属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字控制属性</title>
<style>
/* 字体大小 */
/* 经验：谷歌浏览器里面默认字体大小为16px */
/* 属性名：font-size,属性值：文字尺寸，必须有单位：PC端网页常用的单位px */
p {
font-size: 20px;
/* line-height: 2; */
/* 行高值是数字，表示是当前标签字体大小的倍数 */
line-height: 30px;
}
/* 字体粗细 */
/* 属性名：font-weight,属性值：数字（正常400，加粗700）关键字（正常：normal 加粗：bold） */
h3 {
font-weight: 400;
}
div {
font-weight: 700;
font-style: italic;
}
em {
font-style: normal;
}
/* 字体是否倾斜 */
/* 属性名：font-style 作用：清楚文字默认的倾斜效果 */
/* 属性值：normal正常，italic倾斜 */
/* 行高 调节两行之间的距离（多行文本的间距）*/
/* 行高是指上间距加文本高度加下间距 （测量方法：从一行文字的最顶端（最低端）量到下一行文字的最顶端（最低端））*/
/* 属性名：line-height,属性值：数字+px 数字（当前标签font-size属性值的倍数） */
/* 行高-垂直居中 */
/* 行高属性值等于盒子高度属性值 height=line-height*/
/* 只适用于单行文字 */
div {
height: 100px;
background-color: aquamarine;
line-height: 100px;
}
/* 字体 */
/* 属性名：font-family 属性值（可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找）：字体名 */
div {
font-family: 楷体;
}
/* 字体复合属性 */
/* 属性名font */
/* 用来设置网页文字公共样式 */
/* 写法：是简写方式，一个属性对应多个值的写法，各属性之间用空格隔开 */
/* 字号和字体值必须书写，否则font不生效 */
/* 文字倾斜，文字加粗，字体大小，行高，楷体 */
.word-style {
font: italic 700 30px/2 楷体;
/* font: italic 700 30px/2; */
}
/* 文本缩进 */
/* 属性名：text-indent，属性值：数字 +px 数字+em（1em=当前标签的字号大小） */
p {
/* 首行缩进两字符 */
text-indent: 2em;
font-size: 30px;
}
/* 文本对齐 居中的是文字，不是标签*/
/* 属性名：text-align */
/* 属性值：left 左对齐 center居中对齐 right右对齐 */
h3 {
/* text-align: left; */
/* text-align: right; */
text-align: center;
}
/* 水平对齐方式-图片 */
/* 属性名：text-align */
div {
/* text-align: left; */
/* text-align: right; */
text-align: center;
}
/* 文字的修饰线 */
/* 属性名：text-decoration */
/* 属性值：none去掉下划线，underline下划线（常用的） */
a {
text-decoration: none;
}
div {
text-decoration: underline;
}
p {
text-decoration: line-through;
}
em {
text-decoration: overline;
}
/* 文字颜色 */
/* 属性名：color */
/* 四种写法：英文单词，rgb(r,g,b分别表示三原色取值在0~255),rgba(r,g,b,a a表示透明度取值0~1(设置半透明状态的文字)),十六进制表示法 #RRGGBB (可以简写为两两一组)取值是0到f之间*/
p {
color: rgb(100,200,150);
/* color: rgba(100,200,150,0.5); */
/* color: #789bbb; */
}
</style>
</head>
<body>
<p>段落标签</p>
<div>123</div>
<br><br>
<h3>标题标签</h3>
<div>div标签</div>
<em>倾斜</em>
<p>00后的孩子大都是出生在21世纪的新中国公民。
人类迈向新世纪的又一页精彩篇章。
如果说80后是在少年时期率先跨入中国的电视信息时代，
90后则自小成长在中国电视及PC网络时代，
而00后成长于中国移动网络时代。前几代人的努力为他们创造出了良好的物质条件。</p>
<br><br>
<div>文字</div>
<div class="word-style">文字</div>
<!-- <div><img src="./images/1.jpg" alt="小猫"></div> -->
<a href="#">这是a标签,去掉下划线</a>
</body>
</html>
调试工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>调试工具</title>
<style>
/*
调试工具的细节：
1.如果是错误属性，则有黄色感叹号
2.css属性的前面有多选框，如果勾选，则该属性生效，如果没有勾选，这个属性不生效
*/
div {
color:pink;
font-size: 50px;
}
</style>
</head>
<body>
<div>测试文字</div>
</body>
</html>
复合选择器
<!-- 有两个或者多个基础选择器，通过不同的方式组合而成 -->
<!-- 更准确、更高效的选择目标元素（标签） -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器</title>
<style>
/* 后代选择器书写 */
/* span {
color: blue;
} */
/* div span里面的文字颜色是brown */
/* div span {
color: brown;
} */
/* 子代选择器书写 */
/* div > span {
color:blueviolet;
} */
/* 并集选择器 */
/* div,
p,
span {
color: red;
} */
/* 交集选择器 */
p.box {
color: cadetblue;
}
</style>
</head>
<body>
<!-- 后代选择器：选中某元素的后代元素（所有后代）。 -->
<!-- 选择器写法：父选择器、子选择器（css属性）、父子选择器之间用空格隔开 -->
<span>span标签</span>
<div>
<span>div的儿子span</span>
<p>
<span>div的孙子</span>
</p>
</div>
<!-- 子代选择器：只选一级（选中某元素的子代元素 最近的子级） -->
<!-- 选择器写法：父选择器>子选择器{css属性}，父子选择器之间用>隔开 -->
<!-- 并集选择器:选择多组标签设置相同样式 -->
<!-- 写法:选择器1,选择器2...选择器n{css属性},选择器之间用,隔开 -->
<div>div</div>
<p>p</p>
<span>span</span>
<!-- 交集选择器:同时满足多个条件的元素 -->
<!-- 写法:选择器1选择器2{css属性} 选择器之间连写,无任何符号 -->
<!-- 标签选择器必须书写在最前面 -->
<p class="box">p标签，使用了类选择器box</p>
<p>p标签</p>
<div class="box">div标签，使用了类选择器</div>
</body>
</html>
伪类选择器
<!-- 伪类表示元素状态,选中元素的某个状态设置样式 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
/* 伪类选择器 */
/* 鼠标悬停颜色 */
/* 任何标签都可以设置鼠标悬停的状态 */
/* a:hover {
color: red;
} */
/* div:hover */
/* .box:hover {
color: chocolate;
} */
/* 伪类-超链接 */
/* 四个状态 */
/* a:link {
color: chartreuse;
}
a:visited {
color: chartreuse;
}
a:hover {
color: darkgreen;
}
a:active {
color: chocolate;
} */
/* 工作中，一个a标签选择器设置超链接的样式，hover状态要特殊设置 */
a {
color: gold;
}
a:hover {
color: dodgerblue;
}
</style>
</head>
<body>
<!-- 伪类选择器写法: 选择器:hover{css属性} -->
<a href="#">a标签</a>
<div class="box">div标签</div>
<!-- 伪类-超链接 -->
<!-- 有四个状态:
:link 访问前
:visited 访问后
:hover 鼠标悬停
:active 点击时(激活)-->
<!-- 如果要给超链接设置以上四个状态,需要按LVHA的顺序书写 -->
<a href="#">a超链接</a>
</body>
</html>
css特性
<!-- css特性三类：继承性 层叠性 优先级 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css特性</title>
<style>
/* 继承性 */
/* body {
font-size: 30px;
color: cyan;
font-weight: 700;
} */
/* 层叠性 */
/* div {
font-size: 50px;
color: coral;
} */
/* 相同属性会覆盖（后边的代码会覆盖前面的）*/
/* div {
color: green;
} */
/* 不同属性会叠加 */
/* div {
font-weight:700;
} */
/* 优先级 */
/* 选中标签的范围越大，优先级越低 */
/* 通配符选择器 < 标签选择器*/
div {
color: green;
}
* {
color: red;
}
/* 标签选择器 < 类选择器 */
.box {
color: blue;
}
/* 类选择器 < id选择器 */
#test {
color: gold;
}
/* 行内样式 < !important(提权功能，提高权重优先级到最高 慎用) */
* {
color: lawngreen !important;
}
</style>
</head>
<body>
<!-- 继承性：子级默认继承父级的文字控制属性 -->
<!-- 文字控制的属性一般写到body里面 -->
<!-- <div>div 标签</div>
<p>p 标签</p>
<span>span标签</span> -->
<!-- 如果标签有自己的样式,则不继承 -->
<!-- <a href="#">a 标签</a>
<h1>h1</h1> -->
<!-- 层叠性:相同的属性会覆盖:后面的css属性覆盖前面的css属性 -->
<!-- 不同的属性会叠加:不同的cs属性都生效 -->
<!-- <div>div标签</div> -->
<!-- 优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则 -->
<!-- 规则：选择器优先级高的样式生效 -->
<!-- 公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important -->
<!-- 选中标签的范围越大，优先级越低 -->
<!-- id选择器 < 行内样式 -->
<div class="box" id="test" style="color:deeppink;">div标签</div>
<!-- 优先级-叠加计算 -->
<!-- 如果是复合选择器，则需要权重叠加计算 -->
<!-- 行内样式，id选择器个数，类选择器个数，标签选择器个数 -->
<!-- 规则：从左向右依次比较，同一级个数多的优先级高。如果个数相同，则向后比较 -->
<!-- !important权重最高 -->
<!-- 继承权重最低(直接pass) -->
</body>
</html>
Emmet写法
<!-- 代码的间歇方式,输入缩写VS会自动生成对应代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emmet写法</title>
<style>
div {
/* w100 */
width: 100px;
/* bgc */
background-color: #fff;
/* w500+h200+bgc */
width: 500px;
height: 200px;
background-color: #fff;
}
</style>
</head>
<body>
<!-- 类选择器:标签名.加类名 -->
<p class="box"></p>
<!-- div直接.加类名即可 -->
<div class="box"></div>
<!-- id选择器:标签名#id名 -->
<p id="box"></p>
<!-- 同级标签: div+p -->
<div></div>
<p></p>
<!-- 父子级标签 div > p-->
<div>
<p></p>
</div>
<!-- 多个相同标签 span * 3 -->
<span></span><span></span><span></span>
<!-- 有内容的标签 div{文字}-->
<div>文字</div>
</body>
</html>
背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景属性</title>
<style>
div {
width: 500px;
height: 300px;
background-color: pink;
/* 背景图默认是平铺(复制效果) */
/* 控制背景图 */
background-image: url(./images/bg.jpg);
/* 控制背景图平铺方式 */
/* no-repeat不平铺repeat平铺（默认效果）repeat-x水平方向平铺repeat-y垂直方向平铺 */
background-repeat: no-repeat;
/* 控制背景图位置 */
/* 属性名：background-position(bgp)属性值(可以是关键字也可以是数字+px(像素单位)二者可以混用)：水平方向位置 垂直方向位置 */
background-position: center top;
/* background-position: 50px center; */
/* background-position:right bottom; */
/*垂直：正数向下，负数向上*/
/* background-position:0 100px; */
/* background-position:0 -100px; */
/*水平：正数向右，负数向左*/
/* background-position:50px 0; */
/* background-position:-50px 0; */
/* 关键字取值写法,可以颠倒取值顺序 */
/* background-position: bottom left; */
/* 可以只写一个关键字,另一个方向默认为居中 */
/* background-position: bottom; */
/* 数字只写一个值表示水平方向 */
/* background-position: 50px; */
/* 控制背景图缩放 */
/* 属性名:background-size */
/* 关键字:cover:等比例缩放背景图片以完全覆盖背景,可能背景图片部分看不见
contain:等比例缩放背景图片以完全装入背景区，可能背景区部分空白
百分比：根据盒子尺寸计算图片大小
数字+单位（例如：px) */
background-size: contain;
/* background-size: cover; */
/* 100% 表示图片宽度和盒子宽度一样,图片的高度按照图片比例等比缩放 */
/* background-size: 100%; */
/* background-size: contain; */
}
body {
background-image: url(./images/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
/* 背景图固定 */
/* 背景不会随着元素的内容滚动 */
/* 属性名：background-attachment(bga) */
/* 属性值：fixed */
background-attachment: fixed;
}
/* 背景复合属性 */
/* 属性名：background */
/* 属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序) */
div {
width: 400px;
height: 400px;
background: pink url(./images/1.png) no-repeat center bottom/contain;
/* background: pink url(./images/1.png) no-repeat center bottom/cover; */
}
</style>
</head>
<body>
<!-- 使用背景图实现装饰性的图片效果 -->
<!-- 属性名:background-image 属性值url(背景图url)-->
<div>文字</div>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
<p>测试文字，撑开body,让浏览器有滚动条</p>
</body>
</html>
浙公网安备 33010602011771号