第六章总结_css设置文字宽度-CSDN博客

本文链接：https://blog.csdn.net/2401_87218759/article/details/144779180

6.1 使用CSS设置字体样式
字体样式常用属性:

设置字体的类型:font-family

设置字体的大小:font-size

设置字体的宽度:font-widt

设置字体的倾斜:font-style

6.1.1.字体类型
对于如上四种的代码格式如下:

font-family:字体名称;

参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起

6.1.2.字体大小
在css样式中使用font-size 属性设置字体的大小，其值可以是绝对值也可以是相对值。常见的有“px”(绝对单位)、“pt”（绝对单位)、“em”（相对单位）和“%”（相对单位）等。

语法：font-size

参数：绝对字体尺寸是根据对象字体进行调节的，包括xx-mall、x-small，small、medium, large, x-large 和xx-large的7种字体尺寸，这些尺寸都没有精确定义，只是相对而言的，在不同的设备下，这些关键字可能会显示不同的字号。
相对尺寸是利用百分比或者em以相对父元素大小的方式来设置字体尺寸。

.1.3.字体粗细
CSS样式中使用 font-weight属性设置字体的粗细，它包含 normal、bold、bolder、lighter、100、200、300、400、500、600、700、800和900多个属性值。

语法为：font-weight:bold|number|normal|lighter|100-900;

上述语法表示为：normal 表示默认字体，bold 表示粗体，bolder 表示粗体再加粗，lighter表示比默认字体还细，100~900共分为9个层次

6.1.4.字体倾斜
CSS 中的 font-style属性用来设置字体的倾斜

语法所示:font-style:normal|italic|oblique;

分别为正常-斜体-倾斜体

代码示例如下

6.2 使用CSS设置文本样式
6.2.1.文本水平对齐方式

使用 text-align属性可以设置元素中文本的水平对齐方式。

语法：text-align: left | right | center | justify;

参数：left 为左对齐，right为右对齐，center为居中，justify 为两端对齐。

6.2.2.行高

段落中两行文本之间垂直的距离称为行高。在HTML中是无法控制行高的，在CSS样式中，使用line-height属性控制行与行之间的垂直间距。

语法：

line-height:lenght|normal;

6.2.3.文本的修饰
使用CSS样式可以对文本进行简单的修饰，left属性所提供的text-decoration属性，主要实现文本加下划线、顶线、删除线及文本闪烁等效果

语法如下所示:text-decoration:underline|blink|overline|line-through|none;

6.2.4.段落首行缩进
首行缩进是指段落的第一行从左向右缩进一定的距离。在CSS样式中text-indent属性可以方便地实现文本缩进。可以为所有块级元素应用text-indent，但不能应用于行级元素。如果想把一个行级元素的第一行缩进，可以用左内边距或外边距创造这种效果

语法如下所示:text-indent:length;

6.2.5.首字下沉
首字下沉是指设置段落的第一行第一个字的字体变大，并且向下一定的距离，而段落的其他部分保持不变。
在CSS样式中伪对象“:first-letter”可以实现对象内第一个字符的样式控制。

（注意:行高会影响其效果）

示例代码：（注释掉行高对下沉的影响）

6.2.7.文本的截断

在CSS样式中 text-overflow 属性可以实现文本的截断效果。

语法：text-overflow:clip | ellipsis;

代码示例及运行结果:

6.2.8.文本的颜色
在CSS样式中，对文本增加颜色只需添加 color属性即可。
语法：color:颜色值

6.2.9.文本的背景颜色
在HTML中，可以使用标签的bgcolor属性设置网页的背景颜色。而在CSS里，不仅可
以用background- color属性来设置网页背景颜色，还可以设置文本的背景颜色。

语法：background-color:color | transparent;

参数：color用于指定颜色。transparent表示透明的意思，也是浏览器的默认值。
代码示例如下:

h1{
color: #ff0000;
}

.first{
background-color: #ff0000;
}
代码解读

6.3 使用CSS设置图像样式
6.3.1.设置图像边框
图像的边框就是利用 border属性作用于图像元素而呈现的效果。在HTML中可以直接通过<img>标记的 border属性值为图像添加边框，属性值为边框的粗细，以像素为单位，从而控制边框的粗细。当设置 border 属性值为0时，则显示为没有边框。例如以下代码。

img{
               border-color: #ff0000 #00ff00 #0000ff #000000;
               border-width: 5px 10px 15px 20px;
               border-style: solid dashed dotted double;
           }
如果希望更换边框的颜色仅仅依靠HTML都是无法实现。如果希望分别设置4条边框的不同样式，在CSS 中也是可以实现的，只需要分别设定 border-left、border-right、border-top 和 border-bottom的样式，依次对应于左、右、上、下4条边框。

6.3.2.图像缩放
使用CSS样式控制图像的大小，可以通过width和height两个属性来实现。需要注意的是，当width 和height两个属性的取值使用百分比数值时，它是相对于父元素而言的，如果将这两个属性设置为相对于body的宽度或高度，就可以实现当浏览器窗口改变时，图像大小也发生相应变化的效果。示例代码：

6.3.3.设置背景图像

CSS 除了可以设置背景颜色，还可以用 background-image来设置背景图像。

语法：background-image: url(url)| none;

代码示例

6.3.4设置背景重复

背景重复（background-repeat)属性的主要作用是设置背景图片以何种方式在网页中显示。通过背景重复，设计人员使用很小的图片就可以填充整个页面，有效地减少图片字节大小。
在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只希望沿着一个方向平铺，可以使用 background-repeat属性来控制。

语法：

background-repeat:repeat | no-repeat | repeat-x | repeat-y;

参数：repeat表示背景图像在水平和垂直方向平铺，是默认值；repeat-x表示背景图像在水平方向平铺；repeal-y表示背景图像在垂直方向平铺；no-repeat表示背景图像不平铺。
说明：设置对象的背景图像是否平铺及如何平铺，必须先指定对象的背景图像。

代码示例如下:

6.4 使用CSS设置表单样式

6.4.1.使用CSS修饰常用的表单元素

表单中的元素很多，包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。

1.修饰文本域

文本域主要用于采集用户在其中编辑的文字信息，通过CSS样式可以对文本域内的字体、颜色以及背景图像加以控制。

2.修饰按钮

按钮主要用于控制网页中的表单。通过CSS样式可以对按钮的字体、颜色、边框以及
背景图像加以控制。

3.制作登录表单