css样式与选择器

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选择器 > 类选择器> 元素选择器

注意如果一个内容有两种元素，但是两种元素都有对应的样式则按照自上而下执行的顺序，从而使下面的样式覆盖掉上面的样式