css基础

2024年2月25日 184次阅读 来源: xmaksjdhw

引入

<head>
    <link rel="stylesheet" href="base.css">
    <style>
        body{
            margin: 0;
        }
    </style>
</head>

浏览器私有属性

  • chrome, safari

    • -webkit-

  • firefox

    • -moz-

  • IE

    • -ms-

  • opera

    • -o-

@规则语法

  • @标识符 xxx;
  • @标识符 xxx {}

  • 常用

    • @media
    • @keyframes
    • @font-face

选择器

  1. 简单选择器

    • 标签选择器
    p{color: red;}
    • 类选择器
    .className{color: red;}
    • id选择器
    .idName{color: red;}
    • 通配符选择器
    *{color: red;}
    • 属性选择器
    /*选中属性*/
[att]{color: red;}
[disabled]{color: red;}
/*属性att=val*/
[att=val]{color: red;}
[type=button]{color: red;}
/*包含属性att=val*/
[att~=val]{color: red;}
/*选中属性值等于val或val-开头的*/
[att|=val]{color: red;}
/*选中属性值以val开头的*/
[att^=val]{color: red;}
/*选中属性值以val结尾的*/
[att$=val]{color: red;}
/*选中属性值包含val的*/
[att*=val]{color: red;}
    • 伪类选择器
    a:link{color: gray;}
a:visited{color: red;}
/*以上两个只用于链接*/
a:hover{color: green;}
a:active{color: orange;}
    • :enabled
    • :disabled
    • :checked 单选框 复选框
    • :first-child
    • :last-child
    • :nth-child(even) 选中偶数项
    • :nth-child(3n+1) 选中第1，4，7…项
    • :nth-last-child(3n+1) 选中第1，4，7…项
    • ：only-child 选中只有一个子元素的项
    • :first-of-type
    • :last-of-type 其余同上
    dd:first-of-type{color: red;}
dt:first-of-type{color: red;}
    • :only-of-type
    span:only-of-type{color: red;}
    • 不常用的伪类
    • :empty
    • :root
    • :not()
    • :target
    • :lang()
  2. 伪元素选择器
  • ::first-letter 选中第一个字母
  • ::firt-line 选中第一行
  • ::before{content: "before"} 在某个元素之前插入content的内容
  • ::after{content: "after"}
  • ::selection 选中被选中的元素

  1. 组合选择器

    • 后代选择器
    .className p{color: red;}
    • 子选择器
    .className>p{color: red;}
    • 兄弟选择器
    /*选择h2之后的紧跟着p标签*/
.h2+p{color: red;}
/*选择h2之后的p标签*/
.h2~p{color: red;}

  2. 选择器分组

    h1,h2,h3{color: red;}

css优先级

  1. 行内样式
  2. ID选择器
  3. 类 伪类和属性选择器
  4. 标签选择器和伪元素选择器

css优先级改变

  1. 改变先后顺序

    • 优先级相同，后面的会覆盖前面的

  2. 提升优先级选择器

    • 在选择器前面加上标签选择器
  3. !important

字体

  • font-size

    • px
    • em 基于父元素的倍数
    • 百分比
  • font-family

  • font-weight

    • normal | bold | bolder | lighter
    • 大多数字体只支持normal bold

  • font-style

    • normal
    • italic 斜体
    • oblique 倾斜（强制倾斜）

  • line-height

    • normal
    • px em

对齐方式

  • text-alogn

    • left
    • right
    • center
    • justify 两端对齐

  • vertical-align

    • baseline
    • sub 下标
    • super
    • top
    • text-top
    • middle
    • bottom
    • text-bottom
    • 百分比
    • px

  • text-indent 缩进

    • px em 百分比
    • 2em缩进2个字

格式处理

  • white-space 是否保留换行， 是否合并空格

    • normal 合并 会自动换行
    • nowrap 不换行
    • pre 保留换行 空格 tab
    • pre-wrap 在pre的基础上自动换行（常用）
    • pre-line 只保留还行

  • word-wrap

    • normal
    • break-word 长单词自动换行

  • word-break

    • normal
    • keep-all
    • break-all

文本修饰

  • text-shadow
    /*x偏移，y偏移，模糊半径*/
    text-shadow: x, y, radio, #f00;

  • text-decoration

    • underline 下
    • overline 上
    • line-through 中

高级设置

  • text-overflow

    • clip
    • ellipsis
    /*一行显示文本，超出显示...*/
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

  • cursor 鼠标形状

    • url
    • auto
    • default
    • none
    • help
    • pointer 手型
    • zoom-in 放大镜
    • zoom-out
    • move

  • 强制继承

    • inherit

盒模型

  • 边距 边框 填充 内容
  • margin border padding content
  • width <length>| 百分比 | auto | inherit
  • height

  • 水平居中

    margin: 0 auto;

  • border

    • border-width
    • border-style solid | dashed | dotted
    • border-color

  • border-radius 圆角

    • x 方向半径4个值 / y方向半径4个值
    /*圆形*/
border-radius: 50%;

  • overflow

    • visible 默认
    • hidden 隐藏
    • scroll 滚动
    • auto 超出自动显示滚动条

  • box-sizing

    • content-box | border-box

  • box-shadow

    /*水平偏移 垂直偏移 模糊半径 阴影大小 颜色*/
box-shadow: 4px 6px 3px 2px red;
/*内阴影 水平偏移 垂直偏移 模糊半径 颜色*/
box-shadow: inset 4px 6px 3px red;

  • outline 轮廓， 不占空间

    • outline-width
    • outline-style solid | dashed | dotted
    • outline-color invert 和当前颜色相反

背景

  • background-color

    • #fff
    • rgb()
    • rgba()
    • transparent 全透明
    • 始终在最底层

  • background-image

    • url()
    • 多张图片， 先写的在上层

  • background-repeat

    • repeat-x | repeat-y | repeat | space | round(缩放铺满) | no-repeat

  • background-attachment

    • scroll
    • local 背景随内容移动
    • fixed

  • background-position

    • left right center top bottom
    background-position: 10px 20px;
background-position: right 10px top 20px;
background-position: 20% 50%;
/*居中*/
background-position: center center;
background-position: 50% 50%;
    • 应用 图标精灵

  • linear-gradient() 线性渐变

    /*从上到下*/
background-image： linear-gradient(red, blue);
/*从下到上*/
background-image： linear-gradient(to top, red, blue);
background-image： linear-gradient(to right bottom, red, blue);
/*从下往上 0度*/
background-image： linear-gradient(0deg, red, blue);
/*三种颜色*/
background-image： linear-gradient(green, red, blue);

  • radial-gradient 径向渐变

    background-image： radial-gradient(closest-side, red, blue);
background-image： radial-gradient(farthest-side, red, blue);
background-image： radial-gradient(closest-corner, red, blue);
/*默认大小 最远距离*/
background-image： radial-gradient(farthest-corner, red, blue);
background-image： radial-gradient(circle 100px, red, blue);
  • repeating--gradient 重复 为linear radial

  • background-origin 位置相对点

    • padding-box
    • border-box
    • content-box

  • background-clip 裁剪

    • padding-box
    • border-box 默认
    • content-box

  • background-size

    • px 百分比
    • auto
    • cover 撑满整个容器
    • contain 撑满整个容器 但宽高不能超出
    原文作者：xmaksjdhw
    原文地址: https://segmentfault.com/a/1190000010992061
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞