博主比较懒就不修饰一下了,打卡学习。
笔记都是在中国大学MOOC学习时摘录的,感兴趣可以看看。
*CSS 语法
p{
font-size:12px; //字号
color:blue; //文字颜色
font-weight:bold; //加粗
}
*CSS添加方法
(1)行内添加方法
<p style="color:red;">
天使投资指早期投资,尤其指个人早期投资。
</p>
(2)内嵌样式
<head>
<style type="text/css">
p{color:red;}
</style>
</head>
<body>
<p>
天使投资指早期投资,尤指个人早期投资
</p>
</body>
(3)单独加文件
假设我们做了外部样式表达文件“style.css”
我们就可以引用它
<head>
<link rel="stylesheet" href="css/style.css."/>
</head>
<body>
<p>天使投资指早期投资,尤指个人早期投资。</p>
</body>
(4)优先级 就近原则
行内样式>内嵌样式>链接样式>浏览器默认样式
*CSS选择器
(1)标签选择器
CSS: <style type="text/css">
body{background-color:#ccc;
text-align:center;
font-size:12px;
}
h1{font:"";font-size:20px;}
p{color:red;font-size:16px;}
hr{width:200px;}
</style>
html: <body>
<h1>标题</h1>
<hr/>
<p>正文的段落</p>
版权所有
</body>
(2)类别选择器
css: <style type="text/css">
p{ font-size:12px;}
.one{font-size;18px;}
.two{font-size:24px;}
</style>
html: <body>
<p class="one">类别1</p>
<p class="one">类别1</p>
<p class="two">类别1</p>
<p class="two">类别1</p>
<p>普通段落中的文字</p>
</body>
(3)ID选择器
css: <style type="text/css">
#one{font-size:12px;}
#two{font-size:24px;}
</style>
html: <body>
<p id="one">文字1</p>
<p id="two">文字2</p>
</body>
(4)嵌套声明
css: <style type="text/css">
span{color:red;}
</style>
html:<body>
<p><span>天使投资</span>是投资的一种方式</p>
</body>
(5)集体声明
css: <style type="text/css">
h1,p{text-align:center}
</style>
html: <body>
<h1>欢迎访问论坛</h1>
<p>欢迎访问论坛</p>
</body>
(6)全局申明
css: <style type="text/css">
*{
text-align:center;
}
</style>
html: <body>
<h1>欢迎访问论坛</h1>
<p>欢迎访问论坛</>
<h2>欢迎访问论坛</h2>
</body>