目录
一、CSS简介
- CSS全称：层叠样式表（Cascading Style Sheets）
- CSS也是一种标记语言，用于给HTML设置结构样式，如文字大小，颜色，元素宽度等。
- HTML搭建结构，CSS添加样式，实现结构与样式的分离。
二、CSS基础知识
-
CSS编写位置样式
1.行内样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>位置1_行内样式</title>
</head>
<body>
<!-- 写在标签的style属性中，又称内联样式，书写比较繁琐，仅对当前元素有效 -->
<h1 style="color: red; font-size: 60px;">hello</h1><!--名:值,大小写不区分,color font-size,字体颜色和大小-->
</body>
</html>2.内部样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>位置2_内部样式</title>
<!--内部样式写在head标签内-->
<!-- 更加清晰，样式可以复用，但并没有实现结构与样式的完全分离 -->
<style>
h1{
color: red;
font-size: 60px;
}
h2{
color:green;
font-size: 20px;
}
p{
color:blue;
font-size: 40px;
}
img{
/* 调整图片样式 */
width: 40px;
}
</style>
</head>
<body>
<h1>hello</h1>
<p>hello</p>
<h2>hello</h2>
<img src="../yosemite1.jpg" >
</body>
</html>3.外部样式
在当前目录下新建一个position.css文件，并写入样式，如下：
h1{
color: red;
font-size: 60px;
}
h2{
color:green;
font-size: 20px;
}
p{
color:blue;
font-size: 40px;
}
img{
/* 调整图片样式 */
width: 40px;
}<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>位置3_外部样式</title>
<!-- 通过link标签来连接外部样式和当前.html文件,position.css文件则专注于写样式-->
<link rel="stylesheet" href="./position3.css">
</head>
<body>
<h1>hello</h1>
<p>hello</p>
<h2>hello</h2>
<img src="../yosemite1.jpg" >
</body>
</html>-
样式优先级
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>优先级</title>
<!-- 外部样式和内部样式优先级相同,后来者居上 -->
<style>
h1{
color: red;
}
</style>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<h1>hello</h1>
<!-- 行内样式优先级最高 -->
<h1 style="color:green;">hello</h1>
</body>
</html>-
CSS语法规范
举例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>语法规范</title>
<style>
h1 { /**h1是选择器*/
color: blue; /*声明*/
font-size: 40px; /*最后一个分号可以省略*/
} /*声明块{}*/
</style>
</head>
<body>
<h1>hello</h1>
</body>
</html>-
css代码风格
1.展开风格：内部样式，开发使用，便于维护和调试。
2.紧凑风格：行内样式，项目上线时推荐，可减小文件体积。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css代码风格</title>
<!-- 展开风格 -->
<style>
h2{
color: red;
font-size: 60px;
}
</style>
</head>
<body>
<!-- 紧凑风格 -->
<h1 style="color: blue; font-size: 50px;">hello</h1>
<h2>hello</h2>
</body>
</html>-
CSS通配选择器
对所有的文字进行风格统一改变：选择器不再是某一标签名，使用*表示，例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>通配选择器</title>
<style>
*{
color: orange;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网，土的味道我知道</h1>
<h2>土味情话</h2>
<h3>作者：fearless</h3>
<p>万水千山总是会情，爱我多点行不行</p>
<p>草莓蓝莓蔓越莓，今天你想我了没</p>
</body>
</html>-
元素选择器
为某种元素统一设置样式，但无法差异化，例如
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
h2{
color: chocolate;
}
h3{
color: green;
}
p{
color: blue;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网，土的味道我知道</h1>
<h2>土味情话</h2>
<h3>作者：fearless</h3>
<p>万水千山总是会情，爱我多点行不行</p>
<p>草莓蓝莓蔓越莓，今天你想我了没</p>
<br>
<h2>反杀土味情话</h2>
<h3>作者:fearless</h3>
<p>一村光阴一寸金，劝你死了这条心</p>
<p>西瓜南瓜哈密瓜，把你打成大傻瓜</p>
</body>
</html><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
h2{
color: chocolate;
}
h3{
color: green;
}
p{
color: blue;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网，土的味道我知道</h1>
<h2>土味情话</h2>
<h3>作者：fearless</h3>
<p>万水千山总是会情，爱我多点行不行</p>
<p>草莓蓝莓蔓越莓，今天你想我了没</p>
<br>
<h2>反杀土味情话</h2>
<h3>作者:fearless</h3>
<p>一村光阴一寸金，劝你死了这条心</p>
<p>西瓜南瓜哈密瓜，把你打成大傻瓜</p>
</body>
</html>-
类选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.say{
color: aqua;
}
.aws{
color: aquamarine;
}
.big{
font-size: 50px;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网，土的味道我知道</h1>
<h2>土味情话</h2>
<h3>作者：fearless</h3>
<!-- 一个元素只有一个class,但是一个class可以有多个类 -->
<p class="say big">我说；万水千山总是会情，爱我多点行不行</p>
<p class="say">我说：草莓蓝莓蔓越莓，今天你想我了没</p>
<br>
<h2>反杀土味情话</h2>
<h3>作者:fearless</h3>
<p class="aws">你说：一村光阴一寸金，劝你死了这条心</p>
<p class="aws">你说：西瓜南瓜哈密瓜，把你打成大傻瓜</p>
</body>
</html>-
id选择器
根据元素id值来设置样式，一个元素只有一个ID值，可以同时拥有class和id,例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#as{
color: blueviolet;
}
#qw{
color:brown;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网，土的味道我知道</h1>
<h2>土味情话</h2>
<h3>作者：fearless</h3>
<p id="as">万水千山总是会情，爱我多点行不行</p>
<p>草莓蓝莓蔓越莓，今天你想我了没</p>
<br>
<h2>反杀土味情话</h2>
<h3>作者:fearless</h3>
<p id="qw">一村光阴一寸金，劝你死了这条心</p>
<p>西瓜南瓜哈密瓜，把你打成大傻瓜</p>
</body>
</html>-
交集选择器
交集，即p标签且.beauty类，标签名在前，不能由多个元素出现，p.rich或者.rich.beauty ，例如
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style>
.rich{
color: blue;
}
.beauty{
color: red;
}
/* 交集，即p标签且.beauty类，标签名在前，不能由多个元素出现，p.rich或者.rich.beauty */
p.beauty{
color: green;
}
</style>
</head>
<body>
<h2 class="rich">土豪张三</h2>
<h2 class="beauty">明星李四</h2>
<br>
<p class="beauty">小狗旺财</p>
<p class="beauty">小猪佩奇</p>
</body>
</html>-
并集选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style>
.rich{
color: blue;
}
.beauty{
color: red;
}
/* 并集选择器 */
.beauty,.rich{
background-color: aqua;
width: 180px;
}
</style>
</head>
<body>
<h2 class="rich">土豪张三</h2>
<h2 class="beauty">明星李四</h2>
<br>
<p class="beauty">小狗旺财</p>
<p class="beauty">小猪佩奇</p>
</body>
</html>-
CSS，HTML元素间的关系
-
后代选择器
选中指定元素中，符合要求的后代元素。先写祖先，后写后代，中间空格分开，最终仅改变后代。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
/* ul的li后代 */
ul li{
color: aquamarine;
}
ol li{
color: red;
}
ol li{
color: blue;
}
/* sub类的li后代 */
.sub li{
color:orange ;
}
/* 不同选择器组合 */
.sub #p{
color: blueviolet;
}
</style>
</head>
<body>
<ul>
<li>抽烟</li>
<li>喝酒</li>
<li>烫头</li>
<div><li>烫头</li></div>
</ul>
<hr><!--分割线-->
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
<hr>
<ol class="sub">
<li>java</li>
<li id="p">python</li>
</ol>
</body>
</html>-
子代选择器
选中指定元素的子元素，用>连连接
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04_子代选择器</title>
<style>
div>a{
color: brown;
}
div>p>a{
color: blue;
}
.foot>a{
color: green;
}
</style>
</head>
<body>
<div>
<a href="#">张三</a>
<p>
<a href="#">李四</a>
<div class="foot">
<a href="#">王五</a>
</div>
</p>
</div>
</body>
</html>-
兄弟选择器
相邻选择器：+相连
通用选择器：~相连
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05_兄弟选择器</title>
<style>
/* 选与div仅仅相连的下一个元素p */
div+p{
color: aquamarine;
}
/* 选中与span后的所有p兄弟 */
span~p{
color: blue;
}
</style>
</head>
<body>
<div>hellr</div>
<p>hi</p>
<span>hi</span>
<p>nihao</p>
<p>nihai</p>
</body>
</html>-
属性选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>06_属性选择器</title>
<style>
/* 1.选中具有title属性的元素 */
[title]{
color: red;
}
/* 2.title是u行为222的元素 */
[title="222"]{
color: blueviolet;
}
/* title属性以a开头的元素 */
[title^=a]{
color: blue;
}
/* title属性以q结尾的 */
[title$="q"]{
color: black;
}
/* title属性包含u的元素 */
[title*="u"]{
color: orange;
}
</style>
</head>
<body>
<div title="111">1</div>
<div title="222">2</div>
<div title="a33">3</div>
<div title="44q">4</div>
<div title="5u5">5</div>
</body>
</html>-
伪类选择器
伪类是指具有某种状态的元素
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>07_伪类选择器概念</title>
<style>
/* 选中没有访问过的a */
a:link {
color: red;
}
/* 选中访问过的a*/
a:visited {
color: black;
}
</style>
</head>
<body>
<a href="https://www.jd.com">去京东</a>
<a href="https://www.baidu.com">去百度</a>
</body>
</html>-
伪类选择器_动态伪类
hover:鼠标悬浮时
active:激活时
focus:鼠标聚焦时
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08_动态伪类</title>
<style>
/* lvhas顺序不能变 */
/* 选中没有访问过的a */
a:link {
color: red;
}
/* 选中访问过的a*/
a:visited {
color: black;
}
/* 选中个鼠标悬浮状态的a元素 */
a:hover{
color: aqua;
}
/* 选中激活状态的a元素 */
a:active{
color:blue;
}
span:active{
color:aqua;
}
/* focus当获取焦点时选中该元素 */
input:focus{
color:blueviolet;
background-color: bisque;
}
select:focus{
color: green;
background-color: bisque;
}
</style>
</head>
<body>
<a href="https://www.jd.com">去京东</a>
<a href="https://www.baidu.com">去百度</a>
<span>hello</span>
<br>
<input type="text">
<br>
<select name="num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
</html>-
伪类选择器_结构伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>09_伪类选择器_结构伪类1</title>
<style>
/* div的第一个儿子p元素--结构1 */
div>p:first-child{
color: red;
}
/* div的第一个儿子p元素--结构2 */
div>p:first-child{
color: red;
}
/* div的后代p元素，且时第一个儿子，不论父亲是谁 --结构3 */
div p:first-child{
color: red;
}
/* 结构4 */
p:first-child{
color: red;
}
</style>
</head>
<body>
<!-- 结构1 -->
<!-- <div>
<p>张三：90</p>
<p>李四：80</p>
<p>王五：70</p>
<p>赵六：60</p>
</div> -->
<!-- 结构2 -->
<!-- <div>
<span>a</span>
<p>张三：90</p>
<p>李四：80</p>
<p>王五：70</p>
<p>赵六：60</p>
</div> -->
<!-- 结构3 -->
<!-- <div>
<p>测试</p>
<marquee> <p>张三：90</p></marquee>
<p>李四：80</p>
<p>王五：70</p>
<p>赵六：60</p>
</div> -->
</body>
</html><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>10_伪类选择器_结构选择器2</title>
<style>
/* 最后一个儿子*/
/* div>p:last-child{
color: red;
} */
/* 选中第三个儿子p */
/* div>p:nth-child(3){
color: red;
} */
/* 奇数儿子 */
/* div>p:nth-child(2n+1){
color: red;
} */
/* 前五个 儿子；形式必须时an+b，n=0,1,2,*/
/* div>p:nth-child(-n+5){
color: red;
} */
/* 选中所有儿子p中的第一个 */
/* div>p:first-of-type{
color: red;
} */
/* 选中所有儿子p中的zuihou一个 */
/* div>p:last-of-type{
color: red;
} */
/* 选中所有儿子p中的第三个 */
div>p:nth-of-type(3){
color: red;
}
</style>
</head>
<body>
<div>
<span>ceshi1</span>
<p>张三：90</p>
<p>李四：80</p>
<p>王五：70</p>
<p>赵六：60</p>
<p>孙七：59</p>
<p>老八:40</p>
<span>ceshi2</span>
</div>
</body>
</html>-
伪类选择器_否定伪类
not(状态)，排除某种的伪类：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>否定伪类</title>
<style>
/* 排除某一中元素 */
div>p:not(.fail){
color: red;
}
/*排除title属性以a开头 */
div>p:not([title^="a"]){
color: blue;
}
</style>
</head>
<body>
<div>
<p>张三：90</p>
<p>李四：80</p>
<p>王五：70</p>
<p class="fail" title="a45">赵六：60</p>
<p class="fail">孙琪：50</p>
</div>
</body>
</html>-
伪类选择器_UI伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>UI伪类</title>
<style>
/* 当鼠标选中时 */
input:checked{
width: 200px;
height:200px;
}
/* 禁用的 */
input:disabled{
background-color:bisque;
}
/* 没有禁用的 */
input:enabled{
background-color: aqua;
}
</style>
</head>
<body>
<input type="checkbox">
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="text">
<input disabled type="text">
</body>
</html>-
伪类选择器_目标伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>13_伪类选择器_目标伪类</title>
<style>
div{
background-color: bisque;
height: 200px;
}
/* 锚点选中的区域 */
div:target{
background-color: green;
}
</style>
</head>
<body>
<a href="#11">1</a>
<a href="#22">2</a>
<a href="#33">3</a>
<a href="#44">4</a>
<a href="#55">5</a>
<a href="#66">6</a>
<a href="#77">7</a>
<a href="#88">8</a>
<a href="#99">9</a>
<a href="#110">10</a>
<div id="11">1</div><br>
<div id="22">2</div><br>
<div id="33">3</div><br>
<div id="44">4</div><br>
<div id="55">5</div><br>
<div id="66">6</div><br>
<div id="77">7</div><br>
<div id="88">8</div><br>
<div id="99">9</div><br>
<div id="110">10</div>
</body>
</html>-
伪类选择器_语言伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>14_伪类选择器_语言伪类</title>
<style>
div:lang(en){
background-color: green;
}
</style>
</head>
<body>
<div>1</div>
<div lang="en">2</div>
</body>
</html>-
伪元素选择器
伪元素：不是元素，是元素中的特殊位置，例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>15_伪元素选择器</title>
<style>
/* 选中div中的第一个字符 */
div::first-letter{
color: red;
font-size: 40px;
}
/* 选中div中的第一行*/
div::first-line{
background-color: yellow;
}
/* 选中div中的被鼠标选中的 */
div::selection{
background-color: gray;
}
/* 选中input的提示语句 */
input::placeholder{
background-color: palevioletred;
}
/* 在p元素的最开始位置或者最后位置加1内容 */
p::before{
content:"￥";
}
p::after{
content: ".00";
}
</style>
</head>
<body>
<div>abc defghigk lmnopqrst uvw xyzabc defghigk lmnopqrst uvw xyzabc defghigk lmnopqrst uvw xyzabc defghigk lmnopqrst uvw xyzabc defghigk lmnopqrst uvw xyzabc defghigk lmnopqrst uvw xyzabc defghigk lmnopqrst uvw xyzabc defghigk lmnopqrst uvw xyz</div>
<input type="text" placeholder="请输入">
<p>199</p>
<p>199</p>
<p>199</p>
<p>199</p>
</body>
</html>-
选择器优先级
单个：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>选择器优先级</title>
<style>
/* 行内>id>类>元素>通配*/
#s{
color: aqua;
}
.a{
color: blue;
}
h1{
color: red;
}
*{
color: green;
font-size: 50px;
/* 字体大小仍然听统配选择器的，因为其余选择器没有做要求 */
}
</style>
</head>
<body>
<h1 class="a" id="s" style="color: orange;">hello</h1>
</body>
</html>多个：计算选择器的权重 ，
举例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>选择器优先级_复杂</title>
<style>
/* 计算选择器权重，鼠标放在选择器上即可 */
.a .s{/*（0，2，0）*/
color: red;
}
div>p>span:first-child{/*（0，1，3）*/
color: aqua;
}
/* 添加!important后，优先级最最最高 */
*{
color: blue !important;
}
</style>
</head>
<body>
<div class="a">
<p>
<span class="s">1</span>
<span>2</span>
</p>
</div>
</body>
</html-
CSS三大特性
1.层叠性：优先级相同时，即后来者居上，解决了样式冲突问题。
2.继承性：元素具有其父元素或者祖先元素的特性,例如color,font-size（不可继承的属性：bgcolor,）,优先继承离得近的。
3.优先级：!important>行内>id>类>元素>通配>继承
-
CSS颜色
表示有四种：
1.使用已有命名
2.rgb/rgba
3.hex/hexa
4.hsl/hsla
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>颜色_颜色名</title>
<style>
.a{
/* 在named color中被命名的 */
color: blue;
}
/* 光的三原色：红绿蓝 */
.a{
color: rgb(255,0,0);
}
.b{
color: rgb(50,254,50);
}
/* 光的三原色：红绿蓝+透明度 */
.c{
color: rgba(190, 80, 80, 0.5)
}
/* faststone capture取色工具 */
.a{
/* 十六进制表示*/
color: #ff0000;
}
.b{
/* 十六进制表示+透明度*/
color: #ff000088;
}
.a{
/* 色相，饱和度(0~1)，亮度(0~1)*/
color: hsl(0, 100%, 50%);
}
.b{
/* hsl+透明度*/
color: hsla(90, 100%, 50%,0.5);
}
</style>
</head>
<body>
<p class="a">hello</p>
</body>
</html>-
CSS字体
字体大小：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体大小</title>
<style>
body{
font-size: 11px;
}
.a1{
font-size: 40px;
}
.a2{
font-size: 30px;
}
.a3{
font-size: 20px;
}
.a4{
font-size: 20px;
}
</style>
</head>
<body>
<div class="a1">hello</div>
<div class="a2">hello</div>
<div class="a3">hello</div>
<div class="a4">hello</div>
</body>
</html>字体族：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02_字体族</title>
<style>
/* font-family后为电脑已经安装的字体 */
.a1{
font-size: 40px;
font-family: "微软雅黑";
}
/* 如果第一种字体找不到，则应用第二种字体 */
.a2{
font-size: 30px;
font-family: "华文彩云","楷体";
}
/* 字体分为衬线字体，serif,非衬线字体 sans-serif*/
.a3{
font-size: 20px;
font-family: "STHupo",serif;
/* serif是指如果STHupo字体不存在，则再应用一个衬线字体 */
}
.a4{
font-size: 20px;
}
</style>
</head>
<body>
<div class="a1">hello</div>
<div class="a2">你好</div>
<div class="a3">hello</div>
<div class="a4">hello</div>
</body>
</html>字体风格：斜体
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03_字体风格</title>
<style>
.a1{
font-size: 40px;
font-style: italic;
/* 斜体风格 */
}
.a2{
font-size: 30px;
font-style: oblique;
}
.a3{
font-size: 20px;
font-style: normal;
/* 正常效果 */
}
.a4{
font-size: 20px;
}
</style>
</head>
<body>
<div class="a1">hello</div>
<div class="a2">hello</div>
<div class="a3">hello</div>
<div class="a4">hello</div>
</body>
</html>字体粗细
.<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03_字体风格</title>
<style>
.a1{
font-size: 40px;
font-weight: lighter;
}
.a2{
font-size: 40px;
font-weight: bold;
}
/* bolder不奏效,因为微软雅黑字体没有定义这种粗细 */
.a3{
font-size: 40px;
font-weight: bolder;
}
/* 也可以用数字表示 */
.a4{
font-size: 20px;
font-weight: 100;
}
</style>
</head>
<body>
<div class="a1">hello</div>
<div class="a2">hello</div>
<div class="a3">hello</div>
<div class="a4">hello</div>
</body>
</html>字体复合属性：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体大小</title>
<style>
.a1{
font: bold italic 100px "STHupo";
}
</style>
</head>
<body>
<div class="a1">hello</div>
<div class="a2">hello</div>
<div class="a3">hello</div>
<div class="a4">hello</div>
</body>
</html>-
CSS文本属性
文本间距：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02_文本间距</title>
<style>
/* 字母间距 */
.z1{
letter-spacing: 20px;
}
/* 单词间距,通过空格来识别一个单词 */
.z2{
word-spacing: 20px;
}
.z3{
word-spacing: -1px;
}
</style>
</head>
<body>
<div >hellodfdf</div>
<div class="z1">hellodfsdfsd</div>
<div class="z2">hell odfs dfd</div>
<div class="z3">hell odfs dfd</div>
</body>
</html>文本修饰：各种线
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03_文本修饰</title>
<style>
/* 上划线+波浪线+红色,没有顺序要求*/
.a1{
text-decoration: overline wavy red;
}
/* 下划线+虚线 */
.a2{
text-decoration: underline dotted;
}
.a3{
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="a1">hello</div>
<div class="a2">hello</div>
<div class="a3">hello</div>
<div class="a4">hello</div>
</body>
</html>文本缩进
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04_文本缩进</title>
<style>
div{
font-size: 40px;
text-indent: 80px;
/* 缩进两个字体 */
}
</style>
</head>
<body>
<div>哈哈哈哈哈啊哈哈哈哈哈哈哈</div>
</body>
</html>文本对齐：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05_文本对齐</title>
<style>
div{
background-color: aqua;
/* left center right 对齐,默认左对齐 */
text-align: center;
}
</style>
</head>
<body>
<div>hello</div>
</body>
</html>行高设置：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>06_行高</title>
<style>
#a1{
background-color: aqua;
font-size:40px ;
/* 行高设置px */
line-height: 50px;
/* 不设置行高,则值为normal,浏览器回自动调节行高 */
font-family: "隶书";
}
#a1{
/* 3.数值写法,2倍的50px,参考自身font-size的值 */
line-height:2 ;
}
#a1{
/* 4.%写法*/
line-height:200% ;
}
</style>
</head>
<body>
<div id="a1">该剧的女主角是由拥有多部作品在手的谭松韵领衔主演，她好像跟每一个男明星之间都有一种莫名的CP感，这次有人说跟侯明昊搭档不太合适，但我觉得还挺好的。
在官方发出的几张海报当中，谭松韵一张俏皮可爱，一张温柔腼腆，男主亦是如此，这可能就是性格对比形成的反差感吧，估计男女主角都不止有一面。</div>
</body>
</html>文本对齐_垂直
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>06_行高</title>
<style>
#a1{
background-color: aqua;
height: 400px;
line-height: 760px;
/* 行高和背景高度相同时,字体在最中间 行高=2*背景-字体大小,字体在最下面 */
font-size: 40px;
}
</style>
</head>
<body>
<div id="a1">该剧的女主角是松韵一张俏皮可爱，一张温柔腼腆，男主亦是如此，这。</div>
</body>
</html>vertical-align
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title08_vertical_align</title>
<style>
#a1{
height: 300px;
background-color: aqua;
font-size: 100px;
}
span{
font-size: 40px;
background-color: orange;
/* vertical align用于指定元素所在行的垂直对齐方式 */
/* middle是指父元素的中心点 */
vertical-align: middle;
}
img{
height: 150px;
vertical-align: top;
}
</style>
</head>
<body>
<div id="a1">该剧的女主角。<span>hello</span></div>
<hr>
<div id="a1">
hello<img src="../yosemite1.jpg">
</div>
</body>
</html>
-
CSS_列表相关属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>列表相关属性</title>
<style>
ul{
/* 列表符号 */
list-style-type: circle;
/* 列表符号位置 */
list-style-position:outside;
/* 自定义列表符号 */
/* list-style-image: url(../yosemite1.jpg); */
/* 复合属性,不考虑顺序 */
list-style: circle inside;
}
li{
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</body>
</html>-
CSS_表格相关属性
边框相关属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01_边框相关属性</title>
<style>
table{
/* 方式一 */
border-width: 2px;
border-color: red;
border-style: solid;
/* 方式二 */
border: 2px green solid;
}
td,th{
border: 2px orange solid;
}
</style>
</head>
<body>
<table border="1">
<caption>人员信息</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>男</td>
<td>群众</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>19</td>
<td>男</td>
<td>群众</td>
</tr>
<tr>
<td>3</td>
<td>张零</td>
<td>20</td>
<td>男</td>
<td>党员</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>18</td>
<td>男</td>
<td>团员</td>
</tr>
</tbody>
</table>
</body>
</html>表格特有属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02_表格特有属性</title>
<style>
table{
border: 2px green solid;
width: 500px;
/* 控制表格列宽 */
table-layout: fixed;
/* 控制单元格间距,生效前提时不合并边框border-collapse */
border-spacing: 5px;
/* 合并相邻单元格的边框,单元格边框覆盖表格边框 */
border-collapse: collapse;
/* 隐藏没有内容的单元格 */
empty-cells: hide;
/* 设置表格标题的位置 */
caption-side: top;
}
td,th{
border: 2px orange solid;
}
.a1{
width: 20px;
}
</style>
</head>
<body>
<table>
<caption>人员信息</caption>
<thead>
<tr>
<th class="a1">序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td></td>
<td>男</td>
<td>群众</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>19</td>
<td>男</td>
<td>群众</td>
</tr>
<tr>
<td>3</td>
<td>张零</td>
<td>20</td>
<td>男</td>
<td>党员</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>18</td>
<td>男</td>
<td>团员</td>
</tr>
</tbody>
</table>
</body>
</html>-
CSS_背景相关属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景相关属性</title>
<style>
div{
width: 400px;
height: 400px;
/* 默认值为透明色,transparent */
background-color: skyblue;
border: 5px black solid;
font-size: 40px;
/* 设置背景图片 */
background-image: url(../yosemite1.jpg);
/* 设置背景图片的重复方式 */
background-repeat: repeat;
/* 2种控制背景图片在背景的位置 水平+垂直,默认值center */
background-position: center center;
/* 两个方向的坐标,水平向右,垂直向下 */
background-position: 10px 20px;
/* 复合表示 */
background:green url(../yosemite1.jpg) no-repeat center;
}
</style>
</head>
<body>
<div>hello</div>
</body>
</html>-
CSS_鼠标相关属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>鼠标相关属性</title>
<style>
div{
width: 400px;
height: 400px;
background-color: skyblue;
cursor: help;
}
button{
cursor: pointer;
}
input{
cursor: move;
}
</style>
</head>
<body>
<div>把鼠标放进来看一看
<input type="text">
<a href="http://www.baidu.com">百度</a>
<button>点我</button>
</div>
</body>
</html>
8064
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
