目录:
1 基础认知
2 基础选择器
3 字体和文本样式
4 chrome调试工具
5 综合案例
一：CSS介绍
1 css有三种写法
二：选择器
1 标签选择器
// 如果下面两个p标签，想单独设置一个颜色就搞不定了
2 类选择器
<head>
<style>
.hello {
color: red;
}
.yes {
background-color: yellow;
}
</style>
</head>
<body>
<p class="hello yes" >大家好啊</p> // 一个标签两次命名
</body>
3 id选择器
4 通配符选择器
总结
三：字体和文本样式
1 字体样式
2 文本样式
文本
<style>
p {
/* text-indent: 40px; */
text-indent: 2em; /*缩进2个单位*/
text-align: left; /*左对齐*/
}
h1{
text-align: center;
}
body {
text-align: right;
}
</style>
</head>
<body>
<h1>这是个牛逼的标题</h1>
<p class="hello yes" >大家好啊爱的速递萨杜会带来手机卡和法律会计师打回访了科技河北类克数据恢复离开家少打了卡凉快圣诞节和反馈垃圾啊收到回复老客户都说了卡金凤凰雷克萨接电话分类卡萨交电话费类克数据恢复了会计师打回访了卡剑荡四方四大皆空立法会凉快圣诞节复活卡洛斯加回来看风景阿萨德合理开发计划sad了符</p>
<img src="../../lib/dog.gif" alt="">
</body>
<head>
<title>Document</title>
<style>
div {
/* 下划线 */
text-decoration: underline;
}
/* 删除线 */
h2 {
text-decoration: line-through;
}
/* 上划线 */
p {
text-decoration: overline;
}
/* 无装饰线 */
.aa {
text-decoration: none;
}
</style>
</head>
<body>
<div>你好呀</div>
<h2>👌🏻我ok</h2>
<p>我还行吧</p>
<a href="#" class="aa">哥是超链接，不带下划线~~</a>
<br>
<a href="#" class="bb">哥哥也是超链接，带下划线！！！</a>
</body>
p {
line-height: 20px; // 行高20px
line-height: 1.5; // 1.5倍数
}
<head>
<style>
p {
/* font: style weight size/line-height family*/
/* font: 样式（正常、倾斜）加粗与否 字号/行高 字体 */
/* 斜体 加粗 行高 */
/* font: italic 700 66px/2 宋体; */
/* 只有倾斜 加粗能省略！！！！！！ */
font: 66px/2 宋体;
/* text-decoration: underline;ß */
}
</style>
</head>
<body>
<p>四川省总工会认真贯彻落实习近平总书记对此次泸定地震的重要指示精神，迅速安排部署，组织工会干部和职工群众有序配合参与抗震救灾。第一时间向甘孜州、雅安市总工会了解企业和职工受灾情况及困难需求，加强与受灾县工会联系沟通，及时跟进掌握灾区信息动态，协助做好救灾保障。并在9月5日晚，紧急向甘孜州总工会安排专项救灾补助资金200万元、向雅安市总工会安排专项救灾补助资金100万元，用于地震灾区应急救灾、过渡性生活补助、受灾职工慰问帮扶等。同时，为进一步稳定职工情绪。省总工会充分发挥基层“职工心灵驿站”作用，协助开展受灾职工心理健康服务，广泛宣传有关政策措施，做好职工情绪引导。</p>
</body>
四：chrome 调试工具
五：拓展文本居中
代码
<style>
div {
width: 800px;
height: 800px;
margin: 0 auto;
background-color: orange;
/* margin: 0 auto; 必须设置宽高px，才能生效 */
}
.center {
text-align: center;
}
.title {
color: #808080;
}
.sou {
color: #87ceeb;
}
a {
text-decoration: none;
}
.con{
text-indent: 2em; // 这是缩进2个单位
}
</style>
</head>
<body>
<div>
<h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
<hr>
<p class="center title">2017年01月29日 <span class="sou">新浪科技</span> <a href="#">收藏文本</a></p>
<p class="con">马克思在《1844年经济学哲学手稿》中指出，“自然科学往后将包括关于人的科学，正象关于人的科学包括自然科学一样：这将是一门科学。”[1]128随后他又在《德意志意识形态》中重申了这一思想，并进一步将“一门科学”称为“历史科学”.</p>
<p class="con">[2]146。我国理论界对马克思的这一思想进行了深入研究：指出马克思通过建立人的科学实现自然科学对人的本质的确证[3]；揭示马克思自然科学观中深刻的人学意蕴[4]；指出马克思通过“一门科学”思想实现从哲学研究方法到科学研究方法的转向[5]；认为自然科学与人的科学结合的前提是对关于人的本质力量的科学的揭示[6]；从自然科学与人文学科的对立入手揭示马克思科学观革命的哲学基础[7]；从“一门科学”思想出发探究马克思历史科学思想与实证科学的区别[8]。现有研究深刻揭示了马克思的“一门科学”思想，其理论价值不言而喻，但尚缺少以思想史为线索揭示马克思“一门科学”思想对传统自然科学与哲学关系的超越这一维度。本文正是以此为</p>
</div>
</body>
<head>
<style>
body {
color: #f5f5f5;
}
.goods {
width: 234px;
height: 300px;
background-color: gray;
/* 内容水平居中 */
text-align: center;
/* div水平居中 */
margin: 0 auto;
}
.title {
font-size: 14px;
line-height: 25px;
color: black;
}
.content {
font-size: 12px;
color: #cccccc;
line-height: 30px;
}
.value {
font-size: 14px;
color: #ffa500;
}
img {
width: 160px;
}
</style>
</head>
<body>
<div class="goods">
<img class="image" src="lib/car.jpg" alt="">
<div class="title">九号平衡车</div>
<div class="content">成年人玩具</div>
<div class="value">1999元</div>
</div>
</body>
</html>
网友评论