Coding Tree

外观

CSS 层叠样式表 ​

Cascading style sheets

语法规则 ​

选择器 {
    属性名: 属性值
}

书写位置 ​

<head>
    <title></title>

    <style>
        /* 这里写css */
    </style>
<head>

CSS 引入方式 ​

引入方式书写位置作用范围使用场景
内嵌式style 标签当前页面小案例
外链式link 标签引入单独 css 文件多个页面项目中
行内式标签 style 属性中当前标签配合 js 使用

（1）内嵌式

  • CSS 写在 style 标签中
  • style 标签可以写在页面任意位置，一般放在 head 标签中

（2）外链式

  • CSS 写在单独的.css文件中
  • 通过 link 标签引入到网页中

（3）行内式

  • CSS 写在标签 style 属性中
html
<div style="color: green; background-color: #f1f1f1;">
  这是一段设置了css样式的文字
</div>
这是一段设置了css样式的文字

基础选择器 ​

  • 标签选择器
  • 类选择器
  • id 选择器
  • 通配符选择器

（1）标签选择器

标签名 {
    属性名：属性值;
}

（2）类选择器

.类名{
    属性名：属性值;
}
  • 合法的类名：数字、字母、下划线、中划线
  • 一个元素可以有多个类名，空格隔开

（3）id 选择器

#元素id{
    属性名：属性值;
}
  • 页面中唯一，不能重复
  • 一个标签只能有一个 id
  • id 选择器一般与 js 配合使用

（4）通配符选择器

*{
   属性名：属性值;
}
  • 选中页面所有标签
  • 一般用于统一设置页面样式
css
/* 清除内外边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}