标签:css01 color 100px css font 选择器 red
- css选择器
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.通配符选择器
使用*,选取页面中所有的元素
- css字体属性
标题需要单独设置。
<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; }
标签:css01,color,100px,css,font,选择器,red 来源: https://www.cnblogs.com/youngyounglady/p/14399077.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。