CSS:是一种用于修饰网页的文本样式语言,还可以配合Javascript脚本语言动态对网页各元素操作。
1、内联方式(行内样式)
<p style="color:red">在HTML中如何使用css样式</p>
2、内部方式(内嵌样式),在head标签中使用
<style type="text/css">
p {
color:red;
}
</style>
3、外部导入方式(推荐),在head标签中使用
<link href="main.css" type="text/css" rel="stylesheet"/>
选择器:需要改变样式的HTML元素
格式:选择器{属性:值;属性:值;属性:值;…}
常见选择器:标签选择器、类选择器、ID选择器、派生选择器
使用html标签作为选择器,为指定标签设置样式。
示例1:h1元素设置样式
h1 {
color: red;
font-size: 14;
}
示例2:多个元素设置样式
h1,h2,h3,h4,h5,h6 {
color: green;
}
示例3:子元素会继承最高级元素所有属性
body {
color: #000;
font-family: Verdana, serif; /*字体*/
}
id选择器:使用“id”作为选择器,为指定id设置样式。
使用格式:#id名{样式…}
特点:
•每个id名称只能在HTML文档中出现一次
•在实际开发中,id一般预留JavaScript使用
第一步:给标签指定id
<p id="t">...</p>
第二步:针对id设置样式
#t {
color: red;
}
类选择器:使用“类名”作为选择器,为指定类设置样式。
使用格式:.类名{样式…}
第一步:给标签指定类
<p class="c">...</p>
第二步:针对类设置样式
.c {
color: red;
}
派生选择器:依据元素在其位置的上下文关系来定义样式
示例:
<style type="text/css">
.c p {
color: red;
}
</style>
<div class="c">
<h1>一号标题</h1>
<p>这是一个段落</p>
</div>
padding(内边距):元素到div内边框的距离
margin(外边距):元素div距离父级元素div边缘的距离
border:元素div边框宽度
示例:
padding:10px 5px 15px 20px #上右下左
padding:10px 5px 15px #上右下
padding:10px 5px #上右
padding:10px #四边都是10px
内边距:
padding 设置四边的内边距
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距
外边距:
margin 设置四边的外边距,使用方法同padding
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距
属性 | 描述 | 值 |
---|---|---|
font-size | 设置字体的尺寸 | xx-small、x-small、small、medium、large、x-large、xx-large,从小到大,默认值medium length固定长度,例如12px |
font-family | 字体系列。可以写多个,如果第一个不支持,使用下一个 | |
font-weight | 设置字体的粗细 | normal默认值 bold粗体 bolder更粗 lighter更细< |
font-style | 字体样式 | normal正常 italic斜体 oblique倾斜的字体 |
属性 | 描述 | 值 |
---|---|---|
color | 字体颜色 | 颜色名称,例如red 十六进制值,例如#ff0000 rgb 代码,例如rgb(255,0,0) |
text-align | 文本对齐方式 | left左边 right 右边 center 中间 justify 两端对齐文本效果 |
text-decoration | 文本修饰 | none 默认,定义标准的文本,例如去掉超链接下划线 line-through 删除线 underline 文本下加一条线 |
text-overflow | 文本溢出后显示效果 | clip 修剪文本 ellipsis 显示省略号来代表被修剪的文本 string 使用给定的字符串来代表被修剪的文本 |
letter-spacing | 字符间的距离 | normal 默认 length 自定义间距 |
line-height | 行间的距离(行高) | normal 默认 length 设置固定值 |
border 所有边框样式的缩写
示例:border: 1px solid blue; 宽度样式颜色
border-radius 圆角边框 直接写像素
box-shadow 给元素添加阴影:
**格式:**
box-shadow: h-shadow v-shadow blur spread color inset;
•h-shadow 必选,水平阴影的位置
•v-shadow 必选,垂直阴影的位置
•blur 可选,模糊程度
•spread 可选,阴影的大小
•color 可选,阴影的颜色
•inset 可选,从外层的阴影(开始时)改变阴影内侧阴影
示例1:box-shadow: 1px 2px 3px 1px #c2c2c2;
示例2:box-shadow: 0 5px 20px 0 #e8e8e8;
background-color
描述:背景颜色
•颜色名称,例如red
•十六进制值,例如#ff0000
•rgb 代码,例如rgb(255,0,0)
background-image
描述:背景图片
•url('URL') 图片路径
•none 不显示背景图片
background-repeat
描述设置是否及如何重复背景图像
•repeat 默认。背景图像将在垂直方向和水平方向重复
•repeat-x 背景图像将在水平方向重复
•repeat-y 背景图像将在垂直方向重复
•no-repeat 背景图像将仅显示一次
background-position
描述:背景图片的位置
•left、top、top right、center left、center center、center right、bottom left、bottom center、bottom right
•x% y% 水平位置和垂直位置
background-size
描述:背景图片的尺寸
•length 背景的高度和宽度,例如80px 60px
•percentage 以父元素的百分比设置背景图像的高度和宽度,例如50% 50%
在之前要控制HTML元素的布局,会用到padding、margin、postion、float等方法,经过反反复复调试才能实现效果。
自从Flex弹性布局出现,一切似乎豁然开朗!
启用Flex布局,只需要在外部元素设置display:flex属性。
Flex布局有一个隐式的坐标空间,水平方向有一条主轴,垂直方向有一条交叉轴:
改变主轴(横向)的布局:
justify-content:
•flex-end:右对齐
•center:居中对齐
•space-evenly:平分空间
•space-between:两端对齐
改变交叉轴(竖向)的布局:
align-items
•flex-end:靠下对齐
•center:居中对齐
调整空间占比(子元素宽度):
例如第一个元素三分之一,第二个元素占三分之二,第三个元素占三分之一:flex:1;flex2;flex1