CSS基础4——使用CSS格式化元素内容的文本

CSS的文本属性用于控制文本的段落格式,如设置首行缩进。段落对齐方式、字间距、行间距等。

1、设置文本首行缩进:text-indent

可选属性值包含: 长度 / 百分比

2、设置文本对齐方式:text-align

可选属性包含:left / right / center,分别表示相左对齐。向右对齐,居中对齐

3、设置文本修饰方式:text-decoration

可选属性包含:none / underline (下划线)  / overline(上划线) / line-through(删除线) / blink(闪烁)

4、设置文本阴影效果:text-shadow

可选属性值包含: none  /  color

5、设置行高:line-height

属性值能够是数字,长度,百分比或者normal

6、设置字间距:letter-spacing

可选属性值包含: none / auto  / 自己定义长度

7、设置词间距:word-spacing

可选属性值包含: none / 自己定义长度

8、设置文本大写和小写属性:text-transform

可选属性包含:capitalize 把每一个单词的首字母变成大写

uppercase 把元素中的全部的字母变成大写

lowercase  把元素中的全部字母变成小写

9、设置空白显示形式:white-space

要输入空格的方式:一个是"&nbsp;"。还有一个是<pre>标记。

而CSS中white-space属性类似于pre

可选属性值包含:normal / pre / nowrap

10、设置元素内容的字体颜色与背景

(1)设置元素的前景色:color

取值:能够是16进制值、rgb()函数或者CSS承认的颜色名(如white)

(2)设置背景色:background-color,取值同前景色

(3)设定背景图片:background-image

取值是:图片的URL地址

(4)设置背景图像的铺排:background-repeat

取值:repeat  /  no-repeat  /  repeat-x  /  repeat-y

(5)设置背景图像是岁对象内容滚动还是固定的:background-attachme

取值:sroll  /  fixed

(6)设置背景图片显示的位置:background-position

取值:百分比。自己定义长度(如100px,100px)   /  top  /  center  /  bottom  / left  /  right

11、设置列表格式:list-style-type

属性取值:disc 默认值。实心黑点

circle 空心圆圈

square 方形黑块

decimal  十进制数

lower-roman 小写罗马数字

upper-roman 大写罗马数字

lower-alpha 小写字母

upper-alpha 大写字母

none  无

也能够用list-style-image把列表前面的符号换成图形,若同一时候指定了list-style-type和list-style-image属性,则仅仅有当浏览器不能显示图片作为项目符号时,list-style-type才生效。

12、样式继承:被用来节省为文档书中的每一级别元素指定的CSS样式规则,如给<body>设定一个字体颜色,则这个颜色会被网页内全部的元素继承,除非其它元素有他们自己指定的样式。

不能被继承的属性:margin 、 padding 、 border 、 background

时间: 2024-10-22 12:49:22

CSS基础4——使用CSS格式化元素内容的文本的相关文章

CSS基础——使用CSS格式化元素内容的文本

CSS的文本属性用于控制文本的段落格式,如设置首行缩进,段落对齐方式.字间距.行间距等. 1.设置文本首行缩进:text-indent 可选属性值包括: 长度 / 百分比 2.设置文本对齐方式:text-align 可选属性包括:left / right / center,分别表示相左对齐,向右对齐,居中对齐 3.设置文本修饰方式:text-decoration 可选属性包括:none / underline (下划线)  / overline(上划线) / line-through(删除线)

CSS基础教程——纯CSS开发的气泡式提示框

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:CSS基础教程 —— 纯CSS开发的气泡式提示框 作为前端开发人员,我们都熟悉使用CSS来生成页面上丰富的样式,对于边框border属性来说,也是我们最熟悉不过的CSS属性,今天我们这里将介绍如何使用纯CSS来生成一个气泡式样的提示框,希望大家喜欢! 在这篇文章中我们将使用:after伪标签来生成提示框的指示箭头. 首先我们定义提示框相关属性,我们添加了box阴影和文字阴影效果,这样让提示框更加漂亮: /* bubble */.tip

CSS基础3——使用CSS格式化元素内容的字体

1.CSS属性单位: (1)长度单位:包括绝对长度单位和相对长度单位 绝对长度单位包括:cm.mm.in.pt.pc等.绝对长度单位最好用于打印输出设备,在仅作为频幕显示时,绝对长度值并没有什么意义. 相对长度单位包括:px.em.ex等.相对长度指元素尺寸相对于浏览器的系统默认值来相应的缩放.em是相对于当前对象中文本M的字体尺寸大小.ex是相对于当前对象中文本x的字体尺寸大小.如果当前对行内文本额字体尺寸未被人为设置,则相对于浏览器默认字体尺寸. px,em,百分比的转换:16px = 1e

CSS基础学习十:伪元素

上一篇博客说的是伪类,这次我们来说说伪元素.先来补充一下上篇博客漏掉的一个伪类::focus 伪类 (1)定义和用法 :focus伪类在元素获得焦点时向元素添加特殊的样式.注释IE浏览器不支持此属性. (2)说明 这个伪类应用于有焦点的元素. 例如HTML中一个有文本输入焦点的输入框,其中出现了文本输入光标:也就是说,在用户开始键入时,文本会 输入到这个输入框.其他元素(如超链接)也可以有焦点,不过CSS没有定义哪些元素可以有焦点. a:link {color: #FF0000} /* 未访问的

CSS基础,认识css样式

1.认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于 定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{ font-size:12px; color:red; font-weight:bold; } 使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字 有着统一的字体.字号或者颜色等. 2.CSS代码的语法 css 样式由选择符和声明组成,而声明又由属性和值组成, 选择符: 又称选择器

CSS基础语法和CSS经常用到的知识点总结

1. [代码]css基础教程     CSS基础语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.每条声明由一个属性和一个值组成.每个属性有一个值.属性和值被冒号分开.例如:下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素.在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值.h1 {color:red; font-size:14px;}//看见后面有分号,如果是一个属性或者这个属性在尾部可

css基础 组合选择器之多元素选择器 多个元素加上同一个样式

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

css基础 给p标签中的内容 加粗,斜体,下划线,字体大小

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ part code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8

css基础 :hover 鼠标放在父元素上,子元素变色

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu