4、常用属性
CSS有129个属性,每一个属性的详细链接可以参照网址:CSS 参考 – CSS 的免费视觉指南 (cssreference.io)。我们在入门学习阶段无法记住所有的属性,常用的属性可以分为字体属性、文本属性、表格属性、背景属性等。
(1)字体属性
字体属性包括颜色、字号、字体、粗体等。
颜色使用color属性,属性值可以是颜色名、16进制颜色代码(示例蓝色:#0000ff)或RGB样式(示例蓝色:rgba(0,0,255,0.5),其中a表示透明度)。
文本大小使用font-size属性,很多浏览器的最小字体有阈值。
文本粗细使用font-weight属性,属性值包括:normal、bold、lighter或100-900具体值,其中400等于默认,700等于粗体。
文本样式使用font-style 属性,常用属性是normal与斜体(italic)。
字体使用font-famliy属性,VS Code中会自动提供属性值。
(2)背景属性
实际中最常使用的属性包括:background-color(背景色)、background-image(背景图)、background-position(背景显示位置)、background-repeat(背景填充方式)、background-size(背景大小属性)。
background-size属性可以设置背景图像的大小,常用属性设置包括:具体数值填充长宽,百分比填充,cover(充满整个容器,横纵比例不变,但图片可能会显示不全),contain(图片纵横比不变,将图像缩放到最大且图片内容全部显示)。
background-position使用三种属性值方式,包括:描述性(left、right、top、bottom、center)、XY轴(x% y%)、具体像素值位置(xpos ypos)
<!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>
/* 为容器1设置长宽和颜色 */
.box1{
width: 500px;
height: 500px;
background-color: gold;
}
/* 显示图片,这里路径要使用左斜杠 */
.box2{
width: 1000px;
height: 1000px;
background-image: url("./子集图片/子集.png");
/* 使用repeat同时设置水平和垂直方向重复 */
background-repeat: repeat-x repeat-y;
}
/* 使用size实现拉伸 */
.box3{
width: 400px;
height: 200px;
background-image: url("./子集图片/子集.png");
background-repeat: no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
(3)文本属性
使用text-align属性设置文本对齐方式,常用属性值为:left、right、center。常用于设置标题、文本等。
使用text-decoration属性进行文本的修饰,常用的添加上划线:overline,下划线:underline,删除线:line-through。
使用text-transform控制文本大小写,常用的是:captialize单词首字母大写、uppercase全部大写、lowercase全部小写。
text-indent首行文本缩进,参数可以是具体值,负值表示左缩进,正值右缩进。
<!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{
text-align: center;
text-decoration: underline;
}
p{
font-size: 50px;
text-transform: capitalize;
text-indent: 100px;
}
</style>
</head>
<body>
<h1>演示标题</h1>
<p>hellow world</p>
</body>
</html>
(4)表格属性
HTML可以建立表格,但是更需要CSS进行修饰。表格边框可以直接使用border属性。使用border-collapse折叠边框为单边框。表格宽度和高度可以使用width和height设置。使用text-align设置水平居左、中、右。使用vertical-align设置垂直居上、中、下。使用padding设置单元格的文本填充的间隙。
<!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>
table,td{
width: 400px;
height: 100px;
/* solid为实线*/
border: 1px solid red;
/* 折叠为单边框 */
border-collapse: collapse;
/* 设置水平居中 垂直居下 */
text-align: center;
vertical-align: bottom;
}
.data9{
padding: 15px;
background-color: lawngreen;
}
</style>
</head>
<body>
<table>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td class="data9">data</td>
</tr>
</table>
</body>
</html>
5、关系选择器
除了基础选择器关系选择器分为后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器。
后代选择器:使用父代 子代{}的格式,包括子代、孙子代等。
子代选择器:只针对子代,使用父代>子代{}格式。
相邻兄弟选择器:标签1+标签2格式,和标签1向下相邻的第一个标签2生效
通用兄弟选择器:标签1~标签2格式,和标签1向下相邻的所有标签2生效
<!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+p{
color: red;
}
/* 通用 */
h2~p{
color: green;
}
/* 后代选择器,ul下面的li都是ul的子代 */
ul li{
color: blue;
}
/* 子代选择器 */
ul>li{
font-size: 30px;
}
</style>
</head>
<body>
<h1>第一级大标题</h1>
<p>一级内容1</p>
<p>一级内容2</p>
<h2>二级标题</h2>
<p>二级内容1</p>
<p>二级内容2</p>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<ol>
<li>4</li>
<li>5</li>
</ol>
</ul>
</body>
</html>
6、Box Model
HTML所有的元素都可以看作是盒子,而CSS盒模型本质是一个盒子,来封装HTML元素。盒子类型包括标准盒模型、怪异盒模型;或者分为区块盒子block boxes和行内盒子inline boxes。
(1)盒子模型属性
盒子属性包括外边距margin(margin-top等四方向)、边框border、内边距 padding(padding-left等)、实际内容 content(实际通过设置宽高实现)、轮廓outline等。
<!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>
div{
/* 使用宽高实现content */
width: 400px;
height: 300px;
background-color: aqua;
/* 内边距,上下填充20、左右填充10px */
/* 一个值就上下左右同时填充该值 */
padding: 20px 10px;
/* 边框 粗细、虚线线型、颜色 */
border: 5px dashed blue;
/* 外边距 */
margin: 50px 20px;
/* 轮廓,要先定义线型 */
outline: solid;
outline-color: red;
outline-width: 4px;
}
</style>
</head>
<body>
<div>
<p>盒子内容文本</p>
</div>
</body>
</html>
(2)弹性盒子模型flex box
flex box是为了更好的布局提供的新的盒子模型,其由弹性容器(Flex container)和弹性子元素(Flex item)构成,主要是用过display属性将flex定义为弹性容器,容器内可以包含一个或多个弹性子元素。但是,弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
在容器上使用的属性主要有: display: flex、 flex-direction:、justify-content:、align-items:,分别是设置为弹性盒子、摆放方向、垂直摆放的位置、水平摆放的位置。
在子元素上最常使用的属性只有flex-grow或者flex,用于指定弹性子元素如何分配空间,使用比例等参数。其他常用的几个属性还有:order 属性设置弹性容器内某一个子元素相对于其他子元素的顺序;align-self 会对齐当前 grid 或 flex 行中的元素,并覆盖已有的 align-items 的设置; margin设置子元素周围的空隙值。
<!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>
.container{
/* 使用display设置开启弹性盒子 */
display: flex;
/* 设置子元素的方向为纵向*/
flex-direction: column;
/* 设置垂直方向摆放方式 */
justify-content: center;
/* 设置水平方向摆放方式 */
align-items: center;
width: 500px;
height: 500px;
background-color: #555;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
/* flex会使前面设置的长宽失效,其优先级更高 */
flex:2;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
flex: 2;
/* 设置相对其他的顺序*/
order:1;
/* align-self */
align-self:flex-end;
}
.box3{
width: 100px;
height: 100px;
background-color: blue;
flex: 1;
margin: 2%;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"><P>Text1</P></div>
<div class="box2"><P>Text2</P></div>
<div class="box3"><P>Text3</P></div>
</div>
</body>
</html>
限时特惠:本站每日持续更新海内外内部创业教程,一年会员只需88元,全站资源免费下载点击查看详情。
站长微信:nnxmw123