字体
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;