层叠样式表
css语法
1.字体相关样式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
font-family: '微软雅黑';
font-size: 22px;
/*400 等于nomal,700等于bold*/
font-weight: bold;
/*字体样式 normal, italic(倾斜)*/
font-style: italic;
}
div {
/*字体复合属性,一起设置*/
/*font:font-style font-weight font-size/line-height font family*/
font: italic 500 26px "微软雅黑"
}
</style>
</head>
<body>
<p>棉小星哈哈哈</p>
<div>棉小星呵呵呵</div>
</body>
2.文本样式
文本颜色 color
文本对齐 text-align: left, right, center
文本缩进 text-indent:2em;
(em是相对单位,1em就是本元素的字体大小,2em就是两倍的本元素字体大小。如果没有设置字体大小,就是父元素的字体大小)
文本装饰线 text-decoration
行高 line-height: 36px
文字垂直居中
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
text-decoration: underline;
text-align: center;
background-color: hotpink;
height: 150px;
line-height: 150px;
}
</style>
</head>
<body>
<h1>棉小星嘿嘿嘿</h1>
</body>
3.边框 border
边框:边框粗细、样式、颜色
border-style
<style>
div{
width: 100px;
height: 100px;
border-style: solid;
border-width: 5px;
border-color: blue;
border-left-color: pink;
border-bottom-left-radius: 50px;
}
</style>
4.块级元素水平居中
div中
margin: 0 auto;
5.清除默认样式
清除默认的margin和padding
<style>
*{
margin: 0;
padding: 0;
}
</style>
清除列表前面的默认样式
<head>
<style>
ol,ul{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>2222</li>
<li>2222</li>
<li>2222</li>
</ul>
<ol>
<li>111</li>
<li><a href="">ddddd</a></li>
</ol>
</body>
样式综合示例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式综合</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-family: '宋体'