フロントエンドCSS知識の簡潔なまとめ(思考ガイド付き)
11816 ワード
参考になるhttps://blog.csdn.net/qiushi_1990/article/details/40260447?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-4.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-4.nonecase
彼の絵はすばらしい,ここで参考にした.https://blog.csdn.net/weixin_44309019/article/details/88134914
css
CSS “ (Cascading Style Sheets)”， HTML ， 、 、 。
：
p{
font-size:12px;
color:red;
font-weight:bold;
}
{ : }
p{color:red;}
：
p{font-size:12px;color:red;}
CSS
3 ：
1, css
css HTML
<p style="color:red"> 。</p>
2、 css ，
css <style type="text/css"></style> 。
<style type="text/css">
span{
color:red;
}
</style>
3、 css
css ( ) css
<link href="base.css" rel="stylesheet" type="text/css" />
html 。 <html>、<body>、<h1>、<p>、<img>。
p{font-size:12px;line-height:1.6em;}
css ： p 12px ， 1.6em 。
：
： ， ：
<span> </span>
： class=" " ， ：
<span class="stress"> </span>
： css ， ：
.stress{color:red;}/* */
ID
，ID ， ：
1、 id="ID "， class=" "。
2、ID （#） ， （.）。
ID
：
：
1、ID 。 ， HTML ，ID ， 。 。
， (>), 。 ：
.food>li{border:1px solid red;}
class food li 。
> ， 。
* {color:red;}
h1,span{color:red;}
：
h1{color:red;}
span{color:red;}
css
1， 10，ID 100。 ：
p{color:red;} /* 1*/
p span{color:green;} /* 1+1=2*/
.warning{color:white;} /* 10*/
p span.warning{color:purple;} /* 1+1+10=12*/
#footer .note p{color:yellow;} /* 100+10+1=111*/
（ ）> （ ）> （ ）。
p{color:red;}
p{color:green;}
<p class="first"> ， <span> </span> 。</p>
p green
p{color:red!important;}
p{color:green;}
<p class="first"> ， <span> </span> 。</p>
p red 。
：!important
彼の絵はすばらしい,ここで参考にした.https://blog.csdn.net/weixin_44309019/article/details/88134914