西安市做网站的,网站建设企业响应式网站模板,做移动端网站设计,做文案选图片素材的网站文章目录 CSS的样式元素的属性设置字体设置文字的粗细设置文字的颜色文本对齐文本修饰文本缩进行高设置背景背景的颜色背景的图片图片的属性平铺位置大小 圆角矩形 元素的显示模式行内元素和块级元素的转化弹性布局水平方向排列方式#xff1a;justify-content垂直方向排序方式… 文章目录 CSS的样式元素的属性设置字体设置文字的粗细设置文字的颜色文本对齐文本修饰文本缩进行高设置背景背景的颜色背景的图片图片的属性平铺位置大小 圆角矩形 元素的显示模式行内元素和块级元素的转化弹性布局水平方向排列方式justify-content垂直方向排序方式align-items CSS的样式
CSS的样式就是用来改变元素的展示效果的比如可以设置元素的字体、粗细、颜色等可以设计的样式种类非常多。下面给大家介绍一些常用的样式
元素的属性
设置字体
font-family: 微软雅黑;注里面可供选择的字体种类非常多但是得确保你电脑上有这种字体。 设置文字的粗细
font-weight: 900;注可设置的值的范围是100-900数字越大字体就越粗。 设置文字的颜色
可以通过三种方式来设置颜色方式一直接写单词
color: red;方式二通过rgb/rgba来设置
color: rgb(255255255);
color: rgba(2552552550.5);方式三通过十六进制来设置
color: #ff0000;
color: #FOO;注 rgb指red、green、blue是光的三原色通过指定这三种颜色的浓度可以得到很多的其他颜色rgba里的a指的是透明度可以在0-1之间设置通过十六进制进行设置时当每个分量的两个数字都一样时就可以把六位数字缩写为三位数字。比如#AABBCC可以写为#ABC 文本对齐
左对齐
text-align: left;居中对齐
text-align: center;右对齐
text-align: right;注对齐的是文字 文本修饰
下划线
text-decoration: underline;什么都没
text-decoration: none;上划线
text-decoration: overline;删除线
text-decoration: line-through;注 可以通过这种方式去除a标签的下划线下划线的颜色默认和字体的颜色是一致的也可以自己改变 文本缩进
text-indent: 2em;注1em就是一个文字的尺寸 行高
line-height: normal;注行高等于元素高度就可以实现文字上下居中对齐 设置背景
背景的颜色
background-color: green;注背景颜色的设置方式有三种和颜色的设置一样 背景的图片
background-image: url(dog.jpg);注url里可以是绝对路径也可以是相对路径。 图片的属性
平铺
平铺
background-repeat: repeat;不平铺
background-repeat: no-repeat;水平平铺
background-repeat: repeat-x;垂直平铺
background-repeat: repeat-y;注我们引入的图片是有长度和宽度的平铺说的是在给定的元素大小里这张图片重复几次 位置
方式一方位名词描述居中
background-position: center;居上
background-position: top;居底
background-position: bottom;居左
background-position: left;居右
background-position: right;方式二给定数值background-position: 2px,5px;注在给定数值时使用左手坐标系即原点的位置在左上角。 大小
自己设置背景图片的大小单位是像素
background-size: 20px50px;占父元素大小的百分比
background-size: 50%;背景图片扩展到最大尺寸背景图片的某些内容可能无法显示在背景区域中
background-size: cover;背景图片扩展到最大尺寸背景图片的所有内容都可以显示在背景区域中
background-size: contain;圆角矩形
border-radius: 20px;注 html中所有的元素都是直角矩形强制规定的20px表示设置圆角矩形时的内切圆半径这个值越大矩形的角越圆。 元素的显示模式
元素的显示模式有俩种行内元素和块级元素 行内元素不是独占一行的有可能是好几个挤在一起 块级元素是独占一行的每个元素都各自占一行
行内元素和块级元素的转化
行内元素转为块级元素
display: block;块级元素转为行内元素
display: inline;让元素隐藏
display: none注 一般都是把行内元素转为块级元素需要转为块级元素是因为行内元素无法设置某些属性比如高度 弹性布局
布局方式的发展
基于表格进行布局功能有限。基于浮动进行布局副作用大。基于弹性布局功能强大当前最流行。基于网格布局弹性布局是一维的网格布局是二维的。
弹性布局是用来描述元素之间相对位置关系的任何一个HTML元素都可以指定进行弹性布局。
display: flex;flex布局的本质是给父盒子添加 display: flex; 属性来控制子盒子的位置和排列方式。
解决的问题 对于行内元素宽度、高度、外边距等属性都是不生效的。想要设置这些属性就得把行内元素转化为块级元素但是设置为块级元素之后他们就是一行一行排列的不是一列一列排列了。我们想要让他们一列一列排列就不能实现。使用弹性布局就是让这些行内元素既能设置这些属性又能一列一列排列。
水平方向排列方式justify-content
在弹性布局的父元素这里可以使用 justify-content 属性来设置水平方向的排列方式。
垂直方向排序方式align-items
在弹性布局的父元素这里可以使用 align-items 属性来设置垂直方向的排列方式。
