CSS核心属性和浮动

xiaoxiao2021-02-28  8

目录 一、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)
转载请注明原文地址: https://www.6miu.com/read-2350176.html

最新回复(0)