CSS属性
文字基本样式
windows网页默认是微软雅黑
/*
1.字体大小:font-size
2.字体粗细:font-weight
3.字体样式:font-style
4.字体类型:font-family
5.字体类型:font属性连写
line-height:行高
*/
字体大小
/*
属性名:font-size
取值:数字+px
注意点
1.谷歌浏览器默认文字大小是16px
2.单位(px)需要设置,否则无效
*/
字体粗细
/*
属性名:font-weight
关键字取值:
正常:normal
加粗:bold
纯数字取值(100-900的整百数):
正常:400
加粗:700
实际工作中:正常、加粗两种使用的最多
*/
字体倾斜
/*
属性名:font-style
取值:
正常(默认值):normal
倾斜:italic
*/
复合属性
/*
属性名:font(复合属性)
取值:
font:style weight size family;
省略要求:
只能省略前两个,如果省略了相当于设置了默认值
注意点:如果需要同时设置单独和连写的形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
*/
代码示例
<style>
p {
/*
font-size:;
font-style:;
font-weigth:;
font-family:;
或者此处写字体;
*/
/*复合属性即可以写成如下*/
font: italic 700 66px 宋体;
}
</style>
层叠性(即覆盖)
<style>
/* 通过*定义一个通配符选择器 */
* {
color: blue;
/*即后执行的代码会覆盖前面的*/
color: red;
font-size: 20px;
}
</style>
文本缩进(text-indent)
段落首行缩进,通常都是使用em进行控制,直接写数字的话,比如文字大小改了就还要修改
/*
属性名:text-indent
取值
数字+px
数字+em(推荐这种:1em = 当前标签的font-size的大小)
*/
文本下划线
也叫文本修实现
使用场景:清除a标签默认的下划线
/*
属性名:text-decoration
*/
属性值 | 效果 |
---|---|
underline | 下划线(常用) |
none | 无装饰线(常用来清除a标签所带的下划线) |
line-through | 删除线(不常用) |
overline | 上划线(几乎用不到) |
行高
行高组成:上间距、文本高度(即文字高度)、下间距
应用场景:让单行文本垂直居中、以及取消文字上下间距
/*
作用:控制一行的上下行间距
属性名:line-height
取值:
1.数字+px
2.倍数(当前标签font-size的倍数)
应用:
1.当单行文本垂直居中,可以设置line-height:文字所在标签父元素的高度
2.网页布局中,会设置line-height:1 取消上下间距
*/
文本水平对齐方式(text-align)
html写的文本,css中默认都是左对齐的
/*
属性名:text-algin
取值
属性值 效果
left 左对齐(默认)
center 居中对齐
right 右对齐
注意点:
如果需要让文本水平居中,text-algin属性给文本所在标签(文本的父元素)设置
*/
水平居中
如写在div里面的img图片标签居中,text-algin:center就要加在div上
以下标签居中需要给父级标签加,才能水平居中
/*
text-align:center
text-align:center让以下标签水平居中,需要给标签所在的父级标签设置才生效
1.文本
2.span标签,a标签
3.input标签、img标签
水平居中小结
/*
给父级标签加过水平居中以后,父级内的标签就水平居中了
*/
标签居中
/*
如果需要让div、p、h(大盒子)水平居中
通过margin: 0 auto 来实现
注意点:
1.如果需要让div、p、h(大盒子)水平居中,直接给当前元素(标签)本身设置即可
2.margin: 0 auto一般针对于规定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度
*/
div标签居中,以及给div盒子里的标签也居中
样式布局中,通常先给div盒子水平居中,然后给div标签设置标签居中,此时写在div盒子里的其它标签就会水平居中展示了
div {
/*设置div盒子的宽高*/
width: 234px;
height: 300px;
/*给div盒子居中*/
margin: 0 auto;
/*给所在div盒子里面的元素(标签)居中*/
text-align: center;
background-color: #fff;
}
居中案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #f5f5f5;
}
.goods {
/*设置div盒子的宽高*/
width: 234px;
height: 300px;
/*给div盒子居中*/
margin: 0 auto;
/*给所在div盒子里面的元素(标签)居中,设置过以后图片和文字之类的就会水平展示了*/
text-align: center;
background-color: #fff;
}
</style>
</head>
<body>
<div class="goods">
<img width="160px" src="./平衡车.jpg" alt="">
<h2 style="font-size: 14px; line-height: 25px;">九号平衡车</h2>
<h3 style="line-height: 30px;color: #ccc;">成年人的玩具</h3>
<h2 style="font-size: 14px;color:#ffa500">1999元</h2>>
</div>
</body>
</html>
div标签使用规范
div标签就是用来网页布局的,一个页面可能用无数次,
原则:如果使用div,尽量使用类名控制样式
背景相关属性
/*
注:背景颜色和背景图只会在盒子里面展示
background-color(背景颜色) ,
background-image(背景图) ,
background-repeat(背景图平铺),
background-position(背景图位置)
*/
背景颜色
/*
背景颜色的默认值是透明
属性名:background-color:
属性值:
颜色取值:关键字、rgb表示法、rgba表示法、十六进制
注意点:
1.背景颜色默认值是透明:rgba(0,0,0,0)、transparent
2.背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色
*/
<style>
/*必须是p标签,且类名是box的才会生效此样式*/
div {
width: 400px;
height: 400px;
background-color: pink;
background-color: #ccc;
/* 红绿蓝三原色,a是透明度0-1
r:red
g:green
b:blue
*/
background-color: rgba(0, 0, 0, 0.5);
background-color: rgba(red, green, blue, alpha);/*
alpha:表示透明度*/
}
</style>
</head>
<body>
<div class="div_height">
<a href="#">超链接,设置属性;hover时按钮颜色变红</a>
</div>
</body>
背景平铺
属性名:background-repeat(快捷键bgr)
属性取值 | 效果 |
---|---|
repeat | (默认值)水平和垂直方向平铺 |
no-repeat | 不平铺(即:图片只展示一个) |
repeat-x | 沿着水平方向(x轴)平铺 |
repeat-y | 沿着垂直方向(y轴)平铺 |
背景图位置
/*
属性名:background-position(快捷键bgp):
属性值:background-position:水平方向,垂直方向
方位名词:
水平方向:
left:默认就是左上
center:水平方向居中
right:水平方向右X轴右侧
垂直方向:
top:垂直向上
center:垂直居中
bottom:垂直向下
数字+px(坐标)
坐标系:
原点(0,0):盒子的左上角
X轴:水平向右
Y轴:垂直向下
方位名词取值和坐标取值可以混合使用,第一个取值表示水平,第二个取值表示垂直
*/
背景图和img标签的区别
重要的图片用img,不重要的图片用background-image
/*
需要在网页中展示一张图片
方法一:
img是一个标签,不设置宽高,默认会以原图片尺寸显示
方法二:div标签+背景图
需要设置div的宽高,因为背景图片只是装饰的CSS样式,不能撑开div标签
*/
标签:居中,标签,基础,background,div,font,CSS,属性
From: https://www.cnblogs.com/xiaomengniu/p/16977203.html