标签：需要 元素 声明 sheet mes rgba ext family 通过
1.css组成：选择器+一条或多条声明
<style></style>
<h4>css组成：选择器+一条或多条声明</h4> <style> p{ color:red; font-size: 12px; } </style> </head> <body> <p>陋室铭</p>
<style> p{ color:red; font-size: 12px; } div{ color:gray; } </style> </head> <body> <p>陋室铭</p> <p>醉翁亭记</p> <p>采菊东篱下</p> <div>刘禹锡</div> <div>欧阳修</div> <div>陶渊明</div>
2.类选择器
.类名。定义样式，结构调用类。
<style> .red{ color: red; } </style> </head> <body> <ul> <li class="red">李香兰</li> <li>王羲之</li> <li>louise</li> </ul> <div class="red"> jane </div>
<style> .red{ width:100px; height: 100px; background-color: red; } .green{ width: 100px; height: 100px; background-color: green; } </style> </head> <body> <div class="red"> </div> <div class="green"></div> <div class="red"></div>
3.多类名选择方式
<style> .red{ color:red; } .font35{ font-size: 35px; } </style> <div class="red font35">不以物喜，不以己悲</div>
<style> .box{ width:100px; height: 100px; } .red{ background-color: red; } .green{ background-color: green; } </style> </head> <body> <div class="box red"></div> <div class="box green"></div> <div class="box red"></div>
4.id选择器
样式通过#定义，结构id调用。只能调用一次别人不能使用。经常和js搭配使用。
<style> #bule{ color:blue; } </style> <body> <div id="blue">俄比隆</div>
5.通配符选择器
使用*，选取页面中所有的元素
标题需要单独设置。
<style> body{ font-size: 15px; } h2{ font-family:‘微软雅黑‘; } p{ font-family: ‘Times New Roman‘; } </style> <body> <h2>清朝</h2> <p>康熙</p> <p>鳌拜</p> <p>索尼</p> <p>班布</p> <p>苏克哈沙</p> </body>
字体粗细：
<style>
body{
font-size: 15px;
font-weight: lighter;
}
标题不加粗
h2{
font-family:‘微软雅黑‘;
font-weight:400
}
2.文字样式
3.文本属性
<style> p{ text-align:center;
text-decoration: none; <!--取消链接的下划线-->
}
</style> <body> <p>hi</p> </body>
<style> p { /*text-indent: 20px;* em当前元素大小/ text-indent: 2em; } </style>
4.行间距
行间距=上间距+文本高度+下间距
<style> div{ line-height: 25px; } </style> <body> <div>中国人</div> </body>
5.css引入
<link rel="stylesheet" href="1.css"> <body> <div>中国人</div>
1.css
div{
color:red;
}
标签：需要 元素 声明 sheet mes rgba ext family 通过
原文地址：https://www.cnblogs.com/youngyounglady/p/14399077.html
