css内联样式
css行内样式
href跳转文件路径
css外部样式
<link rel="stylesheet" href="./public.css">
全局选择器
可以与任何元素匹配，优先级最低，一般做初始化样式
*{color: red;font-size: 30px;
}拥有某个属性的元素标签进行css渲染
p.main_class{color: aqua;font-size: 45px;
}
同一个标签可以使用多个类选择器
<h3 class="main_class sec_class">标题</h3>
注意下面这种是错误写法
<h3 class="main_class" class="sec_class">标题</h3>
id选择器使用#来对元素id进行筛选
html代码
<p>这是一个普通的段落。</p>
<p id="special-paragraph">这个段落很特别！</p>
<p>这是另一个普通的段落。</p>
<button id="submit-button">提交</button>
css代码
/* 选中id为'special-paragraph'的元素 */
#special-paragraph {color: red;font-weight: bold;font-size: 20px;}/* 选中id为'submit-button'的元素 */
#submit-button {
background-color: blue;
color: rgb(255, 0, 0);
padding: 10px 20px; /*上下与左右内边距用空格隔开*/
}
这里面的font-weight: bold;意味着设置字体bold为加粗，这里的padding: 10px 20px;上下左右的内边距
id与class的区别
id就像一个人的身份证号是单独的，且不能以数字开头，class就像是一个人的住址是可以共享的
合并选择器
将几种元素或者是id等合并选择，中间用逗号隔开
#submit-button,.txt{color: rgb(50, 144, 226);width: bold;padding: 30px 40px;
}
选择器的优先级
行内选择器 > id选择器 > 类选择器> 元素选择器
注意如果一个内容有两种元素，但是两种元素都有对应的样式则按照自上而下执行的顺序，从而使下面的样式覆盖掉上面的样式