1. CSS背景样式?
background-color 背景色
background-image 背景图
url(背景地址)
默认:会水平垂直都铺满背景图
background-repeat 平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat ( x , y 都进行平铺,默认值 )
no-repeat 都不平铺
background-position : 背景位置
x y : number(px、%) | 单词
x : left、center、right
y : top、center、bottom
background-attachment : 背景图随滚动条移动的方式
scroll : 默认值 ( 背景位置是按照当前元素进行偏移的 )
fixed ( 背景位置是按照浏览器进行偏移的 ) ⭐️在浏览器中无效的问题:图片路径要写对
2. CSS边框样式?
border-style : 边框样式
solid : 实线
dashed : 虚线
dotted : 点线
border-width : 边框大小
px ...
border-color : 边框颜色
red #f00 ...
边框也可以针对某一天边进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom
颜色:透明颜色 transparent
3. CSS文字样式?
font-family : 字体类型
英文、中文 ⭐️用在英文上的样式在中文中无效 中文字体则是两者都可以识别 默认微软雅黑
衬线体:有棱角的、非衬线体 :平滑的 现在用非衬线体的多,因为适应扁平化的网站
注意点:
1.多个字体类型的设置目的:如果当前电脑中没有字体就设置成后一种,都没有就计算机默认的
2.引号的添加的目的
font-size : 字体大小
默认 : 16px
写法 : number(px) medium默认大小| 单词 ( small large ... 不推荐使用)
⭐️字体大小一般为偶数,目的是方便字体对齐
font-weight : 字体粗细
模式: 正常( normal ) 加粗 ( bold )
写法:单词(normal、bold) | 法二:number ( 100 200 ..... 900 , 100到500都是正常的,600都900都是加粗的 其实就两种效果)
font-style : 字体样式
模式: 正常 ( normal ) 斜体 ( italic )
写法:单词 ( normal 、 italic )
注:oblique也是表示斜体,用的比较少,一般了解即可。
区别:1.italic 带有倾斜属性的字体的才可以设置倾斜操作。
2.oblique 没有倾斜属性的字体也可以设置倾斜操作。
4. CSS段落样式?
text-decoration:文本装饰
下划线 : underline
删除线 :line-through
上划线 : overline
不添加任何装饰 : none
⭐️注:添加多个文本修饰:line-through underline overline
text-transform:文本大小写 ( 针对英文段落 )
小写:lowercase
大写:uppercase
只针对首字母大写:capitalize
text-indent : 文本缩进
首行缩进
em单位:相对单位,1em永远都是跟字体大小相同
text-align : 文本对齐方式
对齐方式 : left 、right、center、justify(两端点对齐)
line-height : 定义行高
什么是行高,一行文字的高度,上边距和下边距的等价关系。
默认行高:不是固定值,而是变化的。根据当前字体的大小再不断的变化。
取值:1. number( px ) | scale ( 比例值 , 跟文字大小成比例的 )就写数字
letter-spacing : 字之间的间距
word-spacing : 词之间的间距 ( 针对英文段落的 )
英文和数字不自动折行的问题:
1. word-break : break-all; (非常强烈的折行)
2. word-wrap : break-word;(不是那么强烈的折行 ,会产生一些空白区域)
5. CSS复合样式:
复合的写法,是通过空格的方式实现的。复合写法有的是不需要关心顺序,例如background、border;有的是需要关心顺序,例如font。
1. background : red url() repeat 0 0;
2. border : 1px red solid;
3. font :
注:⭐️最少要有两个值 size family 必须先文字大小再字体 color是不包括在里面的
weight style size family √ 粗细 样式 大小 字体
style weight size family √
weight style size/line-height family √
注:如果非要混合去写的话,那么要⭐️⭐️⭐️先写复合样式,再写单一样式,⭐️⭐️⭐️这样样式才不会被覆盖掉。