字体段落相关属性
设置字体颜色
color：
- 十六进制值 - 如"＃FF0000"
p{
color: #FF0000;
}
- 一个RGB值 - “RGB（255,0,0）”
p{
color: (255,0,0);
}
- 颜色的名称 - 如"#red"
p{
color:#red;
}
制定字体大小
font-size：14px；
p{
font-size:14px;
}
对齐方式
text-align：
left：把文本排列到左边。默认值：由浏览器决定。
p{
text-align:left;
}
right：把文本排列到右边。
p{
text-align:right;
}
center：把文本排列到中间。
p{
text-align:center;
}
justify：实现两端对齐文本效果。
p{
<!-- 除了最后一行其他的文字两端对齐 -->
text-align: justify;
<!-- 设置最后一行两端对齐 -->
text-align-last:justify;
}
文本行高
line-height：
一般使用于文字垂直居中
p{
line-height: 100px;
}
取消li样式
list-style：
li{
list-style:none;
}
文本缩进
text-indent:
/* texe-indent 首行缩进
缩进2个字符时，值等于字体大小*2
*/
p{
texe-indent:12px;
}
设置或删除文本的装饰
text-decoration:
underline：定义文本下的一条线
p{
text-decoration: underline;
}
overline：定义文本上的一条线
p{
text-decoration: overline;
}
line-through：定义穿过文本下的一条线。
p{
text-decoration: line-through;
}
英文字母转换
text-transform：
capitalize：文本中的每个单词以大写字母开头。
.English{
text-transform: capitalize;
}
uppercase：定义仅有大写字母。
.English{
text-transform: uppercase;
}
lowercase：定义无大写字母，仅有小写字母。
.English{
text-transform: lowercase;
}
练习代码
<!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>
/* font-size 改变字体颜色 */
/* color 改变字体颜色 */
.a{
width: 900px;
font-size: 30px;
color: pink;
/* text-align 对齐方式
1.center 居中
2.left 左对齐 默认样式
3.right 右对齐
4.justify 两端对齐
如果最后一行也实现两端对齐需要加一行代码text-align-last:justify ;
用于实现水平居中
*/
text-align: justify;
text-align-last:justify ;
/* line-height: 行高
用于实现垂直居中（行高=盒子高）
*/
line-height: 100px;
/* texe-indent 首行缩进
缩进2个字符时，值等于字体大小*2
*/
text-indent: 60px;
/* list-style li 默认样式
none去掉li默认样式
*/
}
.p{
color: #FF0000;
/* height: 100px; */
/* line-height: 100px; */
/* font-size: 50px; */
background-color: yellowgreen;
}
/* text-decoration:none
用于清楚a标签的默认下划线
显示：a：hover{
text-decoration：underline；
}
*/
a{
text-decoration: none;
}
a:hover{
/* 定义文本下的一条线 */
/* text-decoration: underline; */
/* 定义文本上的一条线 */
/* text-decoration: overline; */
line-height: 80px;
/* 定义穿过文本的一条线（删除线--s或del标签同样效果） */
text-decoration: line-through;
}
.English{
/* 定义每个但粗一大写字母开头 */
/* text-transform: capitalize; */
/* 全部字母都大写 */
/* text-transform: uppercase; */
/* 全部字母都小写 */
text-transform: lowercase;
}
</style>
</head>
<body>
<div class="a">
<p class="p">
双方通过深入坦诚沟通，达成一些共识，最重要的一条就是重回巴厘岛议程，朝着校准中美关系这艘巨轮的航向迈出重要一步。下步的关键就是拿出实际行动，争取两国关系重回正确轨道。美方需要反思导致中美关系陷入严重困难的症结所在，需要把两国元首巴厘岛会晤共识真正转化为具体行动，更需要把拜登总统多次作出的一系列承诺切实落到实处。
<br>
<p>王毅表示，双方要从具体事情做起，坚决阻止“灰犀牛”，妥善处理“黑天鹅”，彻底搬掉“拦路虎”，为中美关系的稳定积累条件、排除干扰。美方应采取理性务实态度，同中方相向而行，推进中美关系指导原则磋商，拓展外交安全沟通渠道，提升沟通实效，畅通人文交往。</p>
</p>
<p class="English">
On the first morning of the Spring Festival, I put on my new clothes when I got up. My father had already cooked breakfast for me. After I finished breakfast, I turned on the TV to watch and eat. Time passed quickly. In the afternoon, dad bought 15 fireworks outside and bought a lot of firecrackers and a number of different kinds of cannons. Dad was able to put it at night.
</p>
<a href="http://www.baidu.com"></a>
</div>
</body>
</html>
效果图
背景相关属性
background-color 背景颜色
.bgBox{
background-color: aquamarine;
}
background-image 背景图片
.bgBox{
background-image: url(./img/a.jpg);;
}
background-repeat 定义背景图片平铺方法
.bgBox{
background-repeat: no-repeat;
}
定义背景图片大小 css3 新增属性
.bgBox{
background-size: 100% 100%;
}
新增知识点
/* 行内元素 span a
行内块元素 img 表单元素（input、select、textarea）
块级元素 div p h1-h6 ul li hr br
*/
行内标签与块级标签转换
display:
inline-block：设置为行内块元素，宽高生效，不独占一行
block：设置为块级元素，宽高生效，独占一行
inline：设置为行内元素，宽高不生效;
none：隐藏
div{
display: inline-block;
}
剩下的自行演示
演示代码
<!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>
.bgBox{
/* width: 800px; */
height: 600px;
/* 定义背景颜色 */
/* background-color: aquamarine; */
/* 定义背景图片 */
/* background-image: url(./img/a.jpg); */
/* 定义背景图片平铺方法 */
/* background-repeat: no-repeat; */
/* 定义背景图片大小 css3 新增属性 */
/* background-size: 100% 100%; */
background: pink url(./img/a.jpg) no-repeat;
background-size: 100% 100%;
}
/* 行内元素 span a
行内块元素 img 表单元素（input、select、textarea）
块级元素 div p h1-h6 ul li hr br
*/
/*
.bgBox:hover .smallBox2{
display:block;
}
*/
.smallBox{
width: 300px;
height: 200px;
background-color: pink;
/* display:
inline-block：设置为行内块元素，宽高生效，不独占一行
block：设置为块级元素，宽高生效，独占一行
inline：设置为行内元素，宽高不生效;
none：隐藏
*/
/* display: inline; */
}
.smallBox2{
background-color: green;
}
.smallBox2:hover+.smallBox3{
display: none;
}
.smallBox3{
background-color: aquamarine;
/* display: none; */
/* visibility: hidden; */
}
.spanbox{
width: 100px;
height: 100px;
background-color: yellow;
display: block;
}
</style>
</head>
<body>
<div class="bgBox">
<div></div>
<div class="smallBox smallBox1"></div>
<div class="smallBox smallBox2"></div>
<div class="smallBox smallBox3"></div>
<div class="smallBox"></div>
<span class="spanbox"></span>
<span class="spanbox"></span>
<span class="spanbox"></span>
</div>
</body>
</html>
效果演示
盒子模型
内边框
代码演示
/* padding: 10px; */
padding-top: 20px;
padding-bottom: 40px;
padding-left: 50px;
padding-right: 30px;
/* 简写 */
/* 第一个值是 上下 第二个值是 左右 */
padding:10px 20px;
/* 上 左右 下 */
padding:10px 20px 30px ;
/* 上 右 下 左 */
padding:10px 20px 30px 40px;
外间距
代码演示
li{
/* margin：10px */
margin-top: 10px;
margin-bottom: 20px;
margin-left: 30px;
margin-right: 40px;
/* 简写 */
/* 上下左右 */
margin: 10px
/* 上下 左右 */
margin:10px 20px;
/* 上 左右 下 */
margin: 10px 20px 30px ;
/* 上 右 下 左 */
margin: 10px 20px 30px 40px ;
/* margin塌陷问题
同级之间上下margin取大值
嵌套盒子，子盒子佳margin-top不生效，需要给父盒子加padding或border
*/
}
边框设置
代码演示
li{
/* 样式：
solid 实线
dashed 虚线
*/
/* 颜色
transparent 透明色
*/
/* 设置四边边框 */
border: 10px dashed red;
/* 单独设置下边框 */
border-bottom: 10px solid red;
/* 单独设置下边框颜色 */
border-bottom-color:aqua ;
background-color: aqua;
margin-bottom: 40px;
}
设置圆角
代码演示
.li4{
margin-top: 60px;
/* 设置圆角 */
width: 200px;
height: 400px;
/*
px固定值 设置小圆角
50% 设置圆形
*/
/* border-radius: 50%; */
/* padding-top: 50px; */
border: 1px solid #efefef;
}
最后效果
小结
提示：代码需要多多练习
希望有用，好好学习
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
