🏒 css的含义

层叠样式表（cascading style sheet），也叫作级联样式表

层叠？多个样式可以施加到同一个标签的上面
样式？设置大小，颜色等等

🎿 css的作用

  1. 美化页面，给页面化妆
  2. 可以使样式代码和结构代码进行分离
    1. 提高了代码的复用性
    2. 提高了代码的维护性
    3. 提高了开发效率

🤺 css的引入方式

  1. 行内样式

在标签的里面，加上一个属性style

  1. style="属性名:属性值; 属性名:属性值;..."

只能针对一个标签设置样式，一般用的不多

  1. 内联样式

在head标签中，写一个子标签style，在style标签里面写选择器

  1. <style>
  2.   div {
  4.   }
  5. </style>

在同一个页面中，如果给多个标签施加相同的样式的时候，就可以选择方式二

  1. 外部样式

新建一个css为后缀名的文件，在该文件中写选择器

  1. div {
  3. }

然后在html文件中的head标签中写一个子标签link

  1. <link rel="stylesheet" href="css文件的路径"/>
  • rel属性：就是说引入文件是一个样式文件
  • href属性：设置样式文件的路径

在多个页面中，如果给多个标签施加相同的样式的时候，就可以选择方式三

注意：如果三个引入方式同时施加相同的效果，就近原则
行内样式>内联样式>外部样式

🎱 css的选择器

可能快速帮助我们定位到具体的哪个标签或者哪几个标签的东西，就称为选择器

选择器的格式

  1. 选择器类型 {
  2.                 属性名:属性值;
  3.                 属性名:属性值;
  4.                 ... ...
  5. }

常见的选择器

元素(标签)选择器

  1. 元素的名字 {
  2.     属性名:属性值;
  3.     属性名:属性值;
  4.     ... ...
  5. }
  6. p {
  7.   font-size: 10px;
  8. }
  1. id选择器
    1. #id 属性值 {
    2.  属性名:属性值;
    3.  属性名:属性值;
    4.  ... ...
    5. }
  1. 类选择器
    1. .class属性值 {
    2.  属性名:属性值;
    3.  属性名:属性值;
    4.  ... ...
    5. }
    优先级：id选择器 > 类选择器 > 元素选择器
  1. 通配符选择器 ```css
  • { 属性名:属性值; 属性名:属性值; … … } ```
  1. 组合选择器
    1. 选择期1,选择器2,... {
    2.  属性名:属性值;
    3.  属性名:属性值;
    4.  ... ...
    5. }
  1. 包含(后代)选择器
    1. 父标签名 子标签名 {
    2.  属性名:属性值;
    3.  属性名:属性值;
    4.  ... ...
    5. }
  1. 子元素选择器
    1. 父标签名>子标签名 {
    2.  属性名:属性值;
    3.  属性名:属性值;
    4.  ... ...
    5. }
  1. 属性选择器

格式一：

  1. 标签名[属性名] {
  2.     属性名:属性值;
  3.     属性名:属性值;
  4.     ... ...
  5. }
  6. div[name] {
  8. }

格式二：

  1. 标签名[属性名='属性值'] {
  2.     属性名:属性值;
  3.     属性名:属性值;
  4.     ... ...
  5. }
  6. div[name=aaa] {
  8. }
  1. 伪类选择器
    1. 标签名:伪类 {
    2.  属性名:属性值;
    3.  属性名:属性值;
    4.  ... ...
    5. }
    主要针对的是超链接：
  • a:link设置元素在未被访问前的样式
  • a:hover设置元素在其鼠标悬停时的样式
  • a:active设置元素在被用户按下时(在鼠标点击与释放之间发生的事件)的样式
  • a:visited设置元素在其链接地址已被访问过时的样式

注意：a:hover 必须在CSS定义中的a:link和a:visited之后才能生效；a:active必须在a:hover后才能生效。

主要针对的是文本框：

  • :focus选择获得焦点时，常与文本框搭配

🏹 常见的属性

字体属性

  • font-family：设置文本的字体
  • font-style：设置指定斜体文本
  • font-weight：设置字体的粗细
  • font-size：设置字体的大小
  • 复合写法：
    1. p {
    2. font-style,font-weight,font-size,font-family
    3. }
    注意：font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。

文本属性

  • color：设置文本的颜色
  • text-align：设置文本的水平对齐方式
  • text-decoration：用于设置或删除文本装饰
  • text-indent：用于指定文本第一行的缩进
  • line-height：用于指定行之间的间距

背景属性

  • background-color：指定元素的背景色
  • background-image：指定用作元素背景的图像
  • background-repeat：设置在水平和垂直方向上是否重复

边框属性

  • border-style：指定要显示的边框类型
  • border-width：指定四个边框的宽度
  • border-color：用于设置四个边框的颜色
  • border-radius：用于向元素添加圆角边框
  • 复合属性写法
    1. div {
    2. border-width,border-style,border-color
    3. }
    注意：border-style是必须的

🎿 盒子模型

使用div + css对页面进行布局
image.png

外边距属性

  • margin：复合属性

    1. margin-top margin-right margin-bottom margin-left

  • margin-top：设置上外边距

  • margin-left：设置左外边距
  • margin-right：设置右外边距
  • margin-bottom：设置下外边距

内边距属性

  • padding：复合属性
  • padding-top：设置上内边距
  • padding-right：设置右内边距
  • padding-bottom：设置下内边距
  • padding-left：设置左内边距

注意：默认情况下，我们在设置内边距的时候，是会影响盒子的大小的，这个时候就要使用：

  1. box-sizing: border-box;

默认情况下，元素的宽度和高度是这样计算的：
width + padding + border = 元素的实际宽度
height + padding + border = 元素的实际高度

🏄 浮动

使用浮动，可以解决多个div可以放在同一行

  • float：设置浮动

    • left：左浮动
    • right：右浮动

  • clear：清除浮动

    • left：清除左浮动
    • right：清除右浮动
    • both：清除左右浮动

注意：清除浮动并不是把设置浮动标签给清除掉，而是清除的是浮动标签对其他标签的影响

⛹ 定位

position：设置定位

  • relative：相对定义：元素相对于其正常位置进行定位

注意：如果设置的是相对定位，那不会对其他的标签元素造成影响

  • absolute：绝对定位 元素相对于最近的定位祖先元素进行定位

注意：如果设置的是绝对定位，那会对其他的标签元素造成影响

top：设置上边距
left：设置左边距
right：设置右边距
bottom：设置下边距

共7个定位