CSS(文本、字体、盒子) | 您所在的位置:网站首页 › csgo怎么把文字设置英文大小 › CSS(文本、字体、盒子) |
一、文本属性 1、文本颜色 color属性被用来设置文字的颜色 2.文本对齐 text-align属性用来设置元素内文本内容的水平对齐方式 left:左对齐(默认值)right:右对齐 center:居中对齐 3、文本装饰 text-decoration 属性用来设置或删除文本的装饰。可以给文本添加下划线(underline)、删除线(line-through)、上划线(overline),但从设计的角度看 text-decoration属性主要是用来删除链接的下划线: a {text-decoration:none;} 4、文本缩进 text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进 p {text-indent : 2em;} em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小 5、行间距 line-height属性用于设置行间的距离,可以控制文字与行之间的距离 6、文本转换 文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母,或每个单词的首字母大写。 p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} 其余有关设置字符间距、设置文本方向、设置文本阴影、设置元素中空白的处理方式等搜索菜鸟教程 二、字体 1、字体系列:font-family 属性设置文本的字体系列。 注意事项: 各种字体之间必须使用英文状态下的逗号隔开一般情况下,如果有空格隔开的多个单词组成的字体加引号2、字体大小:font-size 属性设置文本的大小 如果你不指定一个字体的大小,默认大小和普通文本段落一样,是16像素(16px=1em)。 标题标签比较特殊,需要单独指定文字大小 注:可以使用百分比和em组合 设置 元素的默认字体大小的是百分比: body {font-size:100%;} h1 {font-size:2.5em;} h2 {font-size:1.875em;} p {font-size:0.875em;} 3、字体粗细 font-weight属性设置文本字体的粗细 font-weight:normal | bold(粗体) | bolder(特粗体) | lighter(细体) | number 4、文字样式 font-style:主要是用于指定斜体文字的字体样式属性 p.normal {font-style:normal;}/*正常*/ p.italic {font-style:italic;}/*斜体*/ 三、盒子 盒子模型(box model):就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容 1、边框(border) 语法:border: border-width(定义边框粗细) || border-style |(边框样式)| border-color(边框颜色) ①边框样式 none: 默认无边框 dotted: 定义一个点线边框 dashed: 定义一个虚线边框 solid: 定义实线边框 double: 定义两个边框。 两个边框的宽度和 border-width 的值相同 groove: 定义3D沟槽边框。效果取决于边框的颜色值 ridge: 定义3D脊边框。效果取决于边框的颜色值 inset:定义一个3D的嵌入边框。效果取决于边框的颜色值 outset: 定义一个3D突出边框。 效果取决于边框的颜色值 注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。 ②简写属性(没有顺序) 如:border:5px solid red; ③单独设置边框的各边 border-top:1px solid red; ④border-collapse(表格细线边框) 2、内边距(padding) padding属性用于设置内边距,即边框与内容之间的距离 padding-left / right / top / bottom 简写属性: 值的个数表达意思padding:5px1个值,代表上下左右都有5像素内边距padding:5px 10px2个值,代表上下内边距5像素,左右内边距10像素padding:5px 10px 20px3个值,代表上内边距5像素,左右10像素,下20像素padding:5px 10px 20px 30px4个值,顺时针注:如果盒子已经有了宽度和高度,此时在指定内边框,会撑大盒子,如果保证盒子跟预想中的效果一样,则让width/height减去多出来的内边距大小即可 3、外边距(margin) ①巧妙运用外边距使块级盒子水平居中,满足条件如下:盒子必须指定了宽度+盒子左右的外边距都设置为auto 常见写法: margin-left:auto; margin-right:auto;margin:auto;margin:0 auto;注:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加text-align:center即可(理解:把行内块元素和行内元素看作文本内容) ②嵌套块元素垂直外边距的塌陷问题 对于两个嵌套关系(父子关系)的块元素,父元素有上边距同时子元素也有上边距,此时父元素会塌陷较大的外边距值 解决方案: 可以为父元素定义上边框可以为父元素定义内边距可以为父元素添加overflow:hidden给盒子设置浮动、固定、绝对定位,详细搜索4、清除内外边距 网页元素很多都带有默认的内外边距,而且不同浏览器默认的值也不同,因此我们在布局前,首先要清除下网页元素的内外边距 * { padding:0; margin:0; } 注:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距,但是转换为块级和行内块元素就可以 |
CopyRight 2018-2019 实验室设备网 版权所有 |