目錄:
1 基礎(chǔ)認(rèn)知
2 基礎(chǔ)選擇器
3 字體和文本樣式
4 chrome調(diào)試工具
5 綜合案例
一：CSS介紹
1 css有三種寫法
二：選擇器
1 標(biāo)簽選擇器
// 如果下面兩個(gè)p標(biāo)簽嘉汰，想單獨(dú)設(shè)置一個(gè)顏色就搞不定了
2 類選擇器
<head>
<style>
.hello {
color: red;
}
.yes {
background-color: yellow;
}
</style>
</head>
<body>
<p class="hello yes" >大家好啊</p> // 一個(gè)標(biāo)簽兩次命名
</body>
3 id選擇器
4 通配符選擇器
總結(jié)
三：字體和文本樣式
1 字體樣式
2 文本樣式
文本
<style>
p {
/* text-indent: 40px; */
text-indent: 2em; /*縮進(jìn)2個(gè)單位*/
text-align: left; /*左對(duì)齊*/
}
h1{
text-align: center;
}
body {
text-align: right;
}
</style>
</head>
<body>
<h1>這是個(gè)牛逼的標(biāo)題</h1>
<p class="hello yes" >大家好啊愛的速遞薩杜會(huì)帶來手機(jī)卡和法律會(huì)計(jì)師打回訪了科技河北類克數(shù)據(jù)恢復(fù)離開家少打了卡涼快圣誕節(jié)和反饋垃圾啊收到回復(fù)老客戶都說了卡金鳳凰雷克薩接電話分類卡薩交電話費(fèi)類克數(shù)據(jù)恢復(fù)了會(huì)計(jì)師打回訪了卡劍蕩四方四大皆空立法會(huì)涼快圣誕節(jié)復(fù)活卡洛斯加回來看風(fēng)景阿薩德合理開發(fā)計(jì)劃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倍數(shù)
}
<head>
<style>
p {
/* font: style weight size/line-height family*/
/* font: 樣式（正常轧叽、傾斜）加粗與否 字號(hào)/行高 字體 */
/* 斜體 加粗 行高 */
/* font: italic 700 66px/2 宋體; */
/* 只有傾斜 加粗能省略Ｍ溆琛Ｆ莼隆！Ｐ饽邸Ｊ苈ァ！ */
font: 66px/2 宋體;
/* text-decoration: underline;? */
}
</style>
</head>
<body>
<p>四川省總工會(huì)認(rèn)真貫徹落實(shí)習(xí)近平總書記對(duì)此次瀘定地震的重要指示精神呼寸，迅速安排部署艳汽，組織工會(huì)干部和職工群眾有序配合參與抗震救災(zāi)。第一時(shí)間向甘孜州对雪、雅安市總工會(huì)了解企業(yè)和職工受災(zāi)情況及困難需求河狐，加強(qiáng)與受災(zāi)縣工會(huì)聯(lián)系溝通，及時(shí)跟進(jìn)掌握災(zāi)區(qū)信息動(dòng)態(tài)瑟捣，協(xié)助做好救災(zāi)保障馋艺。并在9月5日晚，緊急向甘孜州總工會(huì)安排專項(xiàng)救災(zāi)補(bǔ)助資金200萬元迈套、向雅安市總工會(huì)安排專項(xiàng)救災(zāi)補(bǔ)助資金100萬元捐祠，用于地震災(zāi)區(qū)應(yīng)急救災(zāi)、過渡性生活補(bǔ)助桑李、受災(zāi)職工慰問幫扶等踱蛀。同時(shí)，為進(jìn)一步穩(wěn)定職工情緒芙扎。省總工會(huì)充分發(fā)揮基層“職工心靈驛站”作用，協(xié)助開展受災(zāi)職工心理健康服務(wù)填大，廣泛宣傳有關(guān)政策措施戒洼，做好職工情緒引導(dǎo)。</p>
</body>
四：chrome 調(diào)試工具
五：拓展文本居中
代碼
<style>
div {
width: 800px;
height: 800px;
margin: 0 auto;
background-color: orange;
/* margin: 0 auto; 必須設(shè)置寬高px允华，才能生效 */
}
.center {
text-align: center;
}
.title {
color: #808080;
}
.sou {
color: #87ceeb;
}
a {
text-decoration: none;
}
.con{
text-indent: 2em; // 這是縮進(jìn)2個(gè)單位
}
</style>
</head>
<body>
<div>
<h1 class="center">《自然》評(píng)選改變科學(xué)的10個(gè)計(jì)算機(jī)代碼項(xiàng)目</h1>
<hr>
<p class="center title">2017年01月29日 <span class="sou">新浪科技</span> <a href="#">收藏文本</a></p>
<p class="con">馬克思在《1844年經(jīng)濟(jì)學(xué)哲學(xué)手稿》中指出圈浇，“自然科學(xué)往后將包括關(guān)于人的科學(xué)寥掐，正象關(guān)于人的科學(xué)包括自然科學(xué)一樣：這將是一門科學(xué)×资瘢”[1]128隨后他又在《德意志意識(shí)形態(tài)》中重申了這一思想召耘，并進(jìn)一步將“一門科學(xué)”稱為“歷史科學(xué)”.</p>
<p class="con">[2]146。我國(guó)理論界對(duì)馬克思的這一思想進(jìn)行了深入研究：指出馬克思通過建立人的科學(xué)實(shí)現(xiàn)自然科學(xué)對(duì)人的本質(zhì)的確證[3]褐隆；揭示馬克思自然科學(xué)觀中深刻的人學(xué)意蘊(yùn)[4]污它；指出馬克思通過“一門科學(xué)”思想實(shí)現(xiàn)從哲學(xué)研究方法到科學(xué)研究方法的轉(zhuǎn)向[5]；認(rèn)為自然科學(xué)與人的科學(xué)結(jié)合的前提是對(duì)關(guān)于人的本質(zhì)力量的科學(xué)的揭示[6]庶弃；從自然科學(xué)與人文學(xué)科的對(duì)立入手揭示馬克思科學(xué)觀革命的哲學(xué)基礎(chǔ)[7]衫贬；從“一門科學(xué)”思想出發(fā)探究馬克思?xì)v史科學(xué)思想與實(shí)證科學(xué)的區(qū)別[8]。現(xiàn)有研究深刻揭示了馬克思的“一門科學(xué)”思想歇攻，其理論價(jià)值不言而喻固惯，但尚缺少以思想史為線索揭示馬克思“一門科學(xué)”思想對(duì)傳統(tǒng)自然科學(xué)與哲學(xué)關(guān)系的超越這一維度。本文正是以此為</p>
</div>
</body>
<head>
<style>
body {
color: #f5f5f5;
}
.goods {
width: 234px;
height: 300px;
background-color: gray;
/* 內(nèi)容水平居中 */
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">九號(hào)平衡車</div>
<div class="content">成年人玩具</div>
<div class="value">1999元</div>
</div>
</body>
</html>
