CSS之文本属性

it2023-09-26  80

字体

1.网站常用字体:微软雅黑 font-family:“隶书”,“宋体”,Arial;   表示可以有多个选择,当没有隶书时会选择宋体,中文优先选择中文字体,英文和数字优先选择英文字体

注:用其他的字体可能导致网站文件过大,网站加载时间较长

2.字体大小: font-size:   当字体大小小于8(依据浏览器的版本决定)的时候,不会继续变小   网页默认字体大小16

3.水平对齐   text-align : center  /  left   /  right        居中   居左(默认) 居右   justify:两端对齐(暂不支持)

4.首行缩进:   text-indent:2em; (支持负数属性 eg:-2em)   em是与字体相对的,在这里表达的是缩进两个字;

5.行高:   line-height,在指定行高属性值中居中,可不写单位,是倍数的意思

font简写:   font:12px/24px “微软雅黑”;     大小 行高    顺序不可改变,三个值都需要写

p { width: 100px; height: 100px; background-color: #00f; line-height: 100px; text-align: center; } <p>巴拉巴拉</p>

效果图:

6. 字体大小写(英文状态下) text-transform:   lowercase 小写   uppercase 大写

7.字体左右间距(字间距) letter-spacing:100px;   当像素为负时,只显示文本的第一个字

字体加粗 1.常用的标签:   b、strong、h1-h6 2.在css中改变字体粗细的样式:   font-weight  是不需要加单位的      变瘦    正常值    加粗 取值:100 200 300   400   500 600 700 800 900      lighter   normal   bold eg: font-weight:400; font-weight:normal; 两种方式都可以实现

字体倾斜 1.常用标签   i、em 2.css样式:   font-style   取值:italic      oblique (倾斜力度较大,浏览器暂不支持)      normal 常规

文本线条   下划线:text-decoration:underline;   删除线:text-decoration: line-through;   上划线:text-decoration: overline;   去除线条样式:text-decoration: none;

.ying1{ text-decoration:underline; } .ying2{ text-decoration:line-through; } .ying3{ text-decoration:overline; } <body> <p class="ying1">樱花樱花想见你</p> <p class="ying2">樱花樱花想见你</p> <p class="ying3">樱花樱花想见你</p> </body>

实现的效果如下图所示: 除了以上样式以外,还有一个在我们网页中经常需要使用的: 去除a标签的下划线:   text-decoration:none;

最新回复(0)