CSS学习笔记

CSS选择器

css语法

selector {declaration1; declaration2; ...}

h1,h2,div {color: red, font-size: 18px}

css书写方式

  • 嵌入式:在<head>标签内使用<style>标签
  • 外链式:在<head>标签中使用<link>标签引入
  • 行内式:在每个标签的style属性中写css代码

css基本选择器

  • 通用选择器:* {}
  • 标签选择器:h1,div {}
  • 类选择器:.class {}
  • id选择器:#id {}

class:类名。每个标签都可以设置的属性
id:ID名。每个标签都可以设置的属性

css复合选择器

  • 多元素选择器:h1,h2,h3,div {}
  • 后代元素选择器:.box h2 {}
  • 子元素选择器:a>b {}
  • 相邻元素选择器:a+b {}

css伪类选择器
给超链接的不同状态设置样式!

状态选择器
正常状态:link
访问过后状态:visited
鼠标放上状态:hover
激活状态:active

伪类选择器的设置顺序:Love Hate

css属性选择器

选择器含义
[attr]包含 attr 属性
[attr=“val”]attr=val
[attr^=“val”]以 val 开头
[attr$=“val”]以 val 结尾
[attr*=“val”]attr 值含有 val

font[color^="re"]:先找到 font 标签,再找出 color 属性
val不区分大小写

其他特征

  • 选择器为HTML标签,具有分组、继承功能
  • css语法不区分大小写
  • css中不能出现html标签的关键字

CSS继承优先级

只有文本、字体样式属性可以被继承!

类型权重
标签1
10
id100
行内式1000

不管是基本选择器,还是复合选择器,权重加起来,值越大,优先级越高!

!important

  • 提升属性的权重值,无限大!
  • 是提升属性的权重,不是选择器的权重
  • 不能提升继承属性的权重

div盒子模型

属性含义
width内容宽
height内宽高
padding内填充
border边框
margin外边距

padding小属性

  • padding-top:上
  • padding-right:右
  • padding-botton:下
  • padding-left:左

简写描述:

padding: 10px 20px 30px 40px

顺序为上、右、下、左

margin小属性

  • margin-top:上
  • margin-right:右
  • margin-botton:下
  • margin-left:左

简写描述:

margin: 10px 20px 30px 40px

顺序为上、右、下、左

竖直方向上的margin不会叠加,取较大的值
水平方向的值会叠加

border小属性

  • border-top:上边框线
  • border-right:右边框线
  • border-botton:下边框线
  • border-left:左边框线

简写描述:

border 粗细 线型 颜色;

boder 1px solid #f00;

solid:实线
dshed:虚线


CSS3结构伪类

选择器说明
E:first-child匹配第一个孩子
E:last-child匹配最后一个孩子
E:nth-child(n)第n个
E:nth-child(2n)第偶数个
E:nth-child(2n+1)第奇数个
E:only-child有且只有一个孩子

CSS3其他标签

标签说明举例
text-shadow文本阴影text-shadow: 3px 4px 5px #f00;
box-shadow盒子阴影box-shadow: 3px 3px 3px 3px insert red;
border-radius圆角矩形border-radius: 10px / 20%
rgba透明度rgba(255, 255, 255, 0.4)
trabsition过度时间width: 2s, hight: 5s
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页