CSS核心属性和浮动

本文详细介绍了CSS的各种属性,包括字体、文本、列表、背景和浮动属性等。解释了这些属性的作用及使用方法,如字体大小、颜色、背景图片设置等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录
一、CSS属性组成和作用
二、CSS字体类属性
三、CSS文本类属性
四、CSS列表类属性
五、CSS背景属性
六、CSS浮动属性


一、CSS属性组成和作用

1.1 每个CSS样式都必须有两部分组成:选择符和声明
注:声明又包括属性和属性值
1.2 CSS属性:属性爽死指定选择符具有的属性,他是css的核心,css2共有150多个属性
1.3 css属性值:属性值包括法定属性值和常规数值加单位或颜色值

二、CSS字体类属性

2.1 字体类型
	2.1.1 语法
		{font-family:字体1 字体2 字体3;}
		例如:font-family:"微软雅黑","宋体";
	2.1.2 说明
		浏览器首先会寻找字体1、如存在就使用改字体来显示内容,
		会按1、2、3依次往下;如果都不存在,则按系统默认字体显示;
		当字体是中文字体时,需要加双引号;
		当英文字体时,需加双引号(“times new roman”)
		当英文字体只有一个单词组成是不加双引号;如(arial)
		windows中文版本操作系统下,中文默认字体为宋体或者新宋体,
		英文字体默认为arial,新推出的版本也默认为微软雅黑
2.2 文本大小
	2.2.1 语法
		{font-size:数值;}
		例 div{font-size:12px;}
	2.2.2 说明
		属性值为数值型时,必须给属性值加单位,属性值为0时除外
		单位还可以是pt,在印刷区域广泛使用9pt=12px
		默认情况下,1em=16px,0.75em=12px
		em表示元素字体高度,em值是根据父元素值来确定,em单位可省略
		如:font-size:12px;line-height:2;则行高为24px
	2.2.3 拓展
		xx-small=9px;x-small=11px;small=13px;medium=16px;
		large=19px;x-large=23px;xx-large=27px
2.3 文本颜色
	2.3.1 语法
		{color:颜色值;}
		例如:div{color:red;}
	2.3.2 说明
		用十六进制表示颜色值,例如:color:#f00
		用rbg表示,color:rbg(value,value,value)
		三原色三组数字相同时,可以缩写为三位
		rgba(value,value,value,value)css3新增属性,rgb三原色,a表示透明度
2.4 加粗
	2.4.1 语法
		{font-weight:bolder/bold/normal/100-900}
	2.4.2 说明
		bolder(更粗的)/bold(加粗)/normal(常规)
		css规范中,把字体的粗细分为9个等级,分别为100-900,900对应最重的字体变形,
		一般500常规字体,600-900加粗字体
2.5 倾斜
	2.5.1 语法
		{font-style:italic(倾斜度小)/oblique(倾斜度大)/normal(常规显示)}
	2.5.2 说明
		italic和oblique都表示倾斜,不过oblique的幅度要大一点,但一般浏览器不明显
2.6 是否大小写
	2.6.1 语法
		{font-variant:normal(正常字体)/small-caps(小型大写字母)}
	2.6.2 说明
		对英文内容起作用
2.7 复合式写法
	2.7.1 语法
		font:style variant weight size family;
		总体设置字体,按以上顺序,style和weight可以互换位置,size和family不可和其他属性位置互换
		如:font:normal normal bold 24px "黑体"
	2.7.2 说明
		这种简写发只有在同时指定font-size和font-family属性时才起作用。
2.8 文字属性简写
	2.8.1 语法
		{font:12px/1.5em "宋体";}
		font-size/line-height/font-family;
	2.8.2 说明
		简写时,font-size和line-height只能通过斜杠组成一个值,不能分开写

三、CSS文本类属性

3.1 水平对齐方式
	3.1.1 语法
		{text-align:left right center justify}
	3.1.2 说明
		left 左 right 右 center 居中 justify两端
3.2 垂直对齐方式
	3.2.1 语法
		{vertical-align:top middle bottom}
	3.2.2 说明
		top 上 middle 中 bottom 下
3.3 行高
	3.3.1 语法
		{line-height:normal/数值;}
	3.3.2 说明
		当单行文本的行高等于容器时,可实现在容器中垂直居中对齐
		当单行文本的行高小于容器时,可实现在容器中中间以上的任意位置的定位
		当单行文本的行高大于容器时,可实现在容器中垂直中间以下任意位置的定位
3.4 文本修饰
	3.4.1 语法
		{text-decoration:none/underline/overline/line-through/blink}
	3.4.2 说明
		none(没有修饰)underline(下划线)overline(上划线)
		line-through(删除线)blink(闪烁)
3.5 首行缩进
	3.5.1 语法
		{text-indent:数值;}
	3.5.2 说明
		text-indent可以取负值,可实现隐藏文本,悬挂缩进
		text-indent属性只对第一行起作用,若第一行不是文本则没变化
3.6 字符间距
	3.6.1 语法
		{letter-spaing:value;}
	3.6.2 说明
		控制英文字母和汉字的字距
		每个文字以及字母之间的间隔
3.7 词间距
	3.7.1 语法
		{word-spacing:normal/数值;}
	3.7.2 说明
		控制英文单词词距 通用于英文词和词之间的间距
		完整的单词之间的间隔,不是字母之间
3.8 文本流控制
	3.8.1 语法
		{layout-flow:horizontal/vertical-ideographic;}只支持IE浏览器
	3.8.2 说明
		horizontal 自左向右
		vertical-ideographic 自上而下,自右向左
3.9 控制文本大小写
	3.9.1 语法
		{text-transform:none(默认值)/capitalize(每个单词首字母大写)
		/uppercase(都为大写字母)/lowercase(都为小写字母)}
3.10 文本阴影
	3.10.1 语法
		{text-shadow:value,value,value,#f00;}
	3.10.2 说明
		依次为 水平偏移值 垂直偏移值 模糊的半径 阴影的颜色

四、CSS列表类属性

4.1 定义列表符号样式
	4.1.1 语法
		{list-style-type:disc(实心圆)/circle(空心圆)/square(方块)/
		none(去掉符号)}
4.2 使用图片作为列表符号
	4.2.1 语法
		{list-style-image:url(路径)}
4.3 定义列表符号的位置
	4.3.1 语法
		{list-style-position:outside(外边)/inside(里边)}
	4.3.2 说明
		去掉列表样式 list-style-type:none
4.4 边框
	4.4.1 语法
		{border:粗细(数值+单位)颜色 线型(solid/dashed/dotted/double);}
	4.4.2 说明
		solid 实线 dashed 虚线 dotted 点状线 double 双线

五、CSS背景属性

5.1 背景颜色
	5.1.1 语法
		选择符{background-color:颜色值;}
		简写:background:color值;
5.2 背景图片的设置
	5.2.1 语法
		{background-images:url(路径);}
	5.2.2 说明
		网页上有两种图片形式 插入图片、背景图
		插入图片属于网页内容,也就是结构
		背景图属于网页的表现,背景图上可以显示文字、插入图片、表格等
5.3 背景图片的显示规则
	容器尺寸等于图片尺寸,背景图片正好显示在容器中
	容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素
	容器尺寸小于图片尺寸,只显示元素范围以内的背景图
5.4 背景图片平铺属性
	5.4.1 语法
		选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y}
	5.4.2 说明
		no-repeat 不平铺 repeat 平铺 repeat-x 横向平铺 repeat-y 纵向平铺
5.5 背景图片的位置
	5.5.1 语法
		{background-position:值1 值2;}
		{background-position:left/center/right/数值/top/bottom;}
	5.5.2 说明
		水平方向上对齐方式(left/center/right)
		垂直方向上对齐方式(top/center/bottom)
5.6 背景图片缩写
	5.6.1 语法
		{background:属性值1 属性值2 属性值3;}
	5.6.2 说明
		background:#背景色 url(路径) no-repeat 水平位置 垂直位置
5.7 背景图的固定
	5.7.1 语法
		选择符{background-attachment:scroll(滚动)/fixed(固定);}
	5.7.2 说明
		fixed 固定,不随内容一块滚动
		scroll 随内容一块滚动
5.8 背景大小
	5.8.1 语法
		{background-size:数值/百分比/auto/cover/contain;}
	5.8.2 说明
		第一个值设置宽度 第二个至设置高度
	5.8.3 兼容IE的方法
	background-image:url('file:///F:/test/images/flashbg.jpg');
	background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file:///F:/test/images/flashbg.jpg',sizingMethod='scale');

六、CSS浮动属性

6.1 浮动含义
	float定义网页中其他文本如何环绕该元素
6.2 float
	6.2.1 属性值
		left元素活动浮动在文本左面
		right 元素浮动在右面
		none 默认值,不浮动
	6.2.2 特点
		默认的常规文档流:页面内容从上到下,从左到右排列。div块换行显示
	6.2.3 浮动的三大显示特征
		div块元素失去“块状”换行现实特征,变为行内元素
		紧贴上一个浮动元素(同方向)或父级元素的边框,如宽度不够将换行显示
		占据行内元素的空间,导致行内元素围绕显示
6.3 clear
	6.3.1 含义
		规定元素的哪一侧不允许其他浮动元素
	6.3.2 属性值
		none 默认值。允许浮动元素出现在两侧
		both 在左右两侧均不允许浮动元素
		left 在左侧不允许浮动元素
		right 在右侧不允许浮动元素
6.4 解决高度塌陷
	6.4.1 方法一
		给父元素添加一个声明overflow:hidden
	6.4.2 方法二
		在浮动元素下方添加空div,并给该div添加声明
		clear:both;height:0;overflow:hidden(或font-size:0)
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值