CSS

字数统计: 2.9k阅读时长: 12 min

 2022/02/16 

CSS基础

基础

语法

内嵌式：写在<style>双标签，选择器查找标签。

<style>
    div{
        color:red;
        font-size:30px;
        background-color:green;
        width:400px;
        hright:300px;
    }
</style>
<body>
    <div>

    </div>
</body>

外联式：写在单独.css，通过link标签在网页中引入
<link rel="stylesheet" href="">
css写在标签的style属性，配合js使用
<div style="color:green;">内容</div>;

选择器

标签选择器选择一类标签。
类选择器<div>
- 一个标签可以多个类名，空格隔开
- 类名由数字字母下划线中划线组成，可以重复
```
<head>
.one{
    /**/
}
</head>
<body>
<p class="one">内容</p>
<div class="one">内容</div>
</body>
```
id选择器
- #定义
- 所有标签都有且仅有一个id属性，id在一个页面唯一，一个id选择器只能选中一个标签值，配合js属性
通配符选择器
- *{}定义
- 修改页面边距

CSS层叠样式表，设置相同样式时按最后一次渲染

文字样式

font-size:使用谷歌工具检查工具
font-weight:
- 关键字：一般normal bold
- 纯数字：100~900整百
font-style:normal/italic
font-family:微软雅黑，黑体，sans-serif //未安装微软雅黑使用黑体或任意非衬线字体
复合属性font:style weight size family
- 只能省略前两个
- 单独的样式写在连写下方

文本样式

文本缩进text-indent:数字+px/em字大小
文本对齐text-align:left,center,right
- 文本(h1)；span,a,input,img标签
- 属性加给父级标签内<><>
文本修饰text-decoration:underline(下划线);line-through(删除线);overline(上划线);none(a标签清除装饰线);
行高line-height：px/倍数
- font:style weight size/lineheight family

颜色

颜色表示方式	表示含义	属性值
关键词	预设颜色	red
rgb表示法	红绿蓝，每项取值0~255	rgb(0,255,255)
rgba表示法	a表示透明度，0~1
十六进制表示法	#红绿蓝	#ff0000

code1

<html>
<head>
<style>
    div{
        margin:0 auto;/*div整体居中*/
        /*text-align:center:此标签内部的所有内容居中*/
    }
    h1{
        text-align:center;/*h1标题整体居中*/
    }
    /*后面还有其他p段落，所以p副标题的居中不采用标签选择器，用类选择器*/
    .center{
        text-align:center;
    }
    .color1{
        color:#808080;
    }
    .color2{
        color:#87ceeb;
        font-weight:700;
    }
    a{
        text-decoration:none;
    }
</style>
</head>
<body>
    <div>
        <h1>标题</h1>
        <p class="center">
            <span class="color1">副标题1.1</span>
            <span class="color2">副标题1.2</span>
            <a href=" ">收藏本文</a>
        </p>
    </div>
</body>
</html>

进阶

后代选择器：父选择器后代选择器(儿子、孙子…)
子代选择器：父选择器>子代选择器
并集选择器：选择器1，选择器2，选择器n(换行隔开 )
交集选择器：同时满足多个选择器的标签。选择器之间没有间隔符分隔，标签选择器必须写在类选择器前
hover伪类选择器：选择器:hover{css}鼠标悬停在元素的状态。

emmet语法

//TODO

背景

background-color:
background-image:url(./images/1.jpg);
background-repeat背景平铺:repeat/norepeat/repeat-x/repeat-y
background-position
- left/center/right ; top/center/bottom
- +-数字px
background推荐复合顺序：color image repeat position

重要图片img，装饰性图片background

显示模式

块级：独占一行、宽度默认父级标题、可以设置宽高。如<div>
行内：不换行、设置宽高不生效、宽高和内容一致。如<a><span>
行内块：一行可以显示多个，可以设置宽高。如<input><textarea><button><select><image>
！解析行内块或行内标签时，如果换行会产生空格
元素显示模式转换display:block;inline-block;in-line
标签嵌套原则：
- 块级元素作为大容器，可以嵌套文本、块级元素，行内块，行内元素。
- p不能嵌套div,p,h元素
- a标签内部可以嵌套除a外任意元素

CSS特性

继承性
- 子元素默认继承父元素样式，可继承文字控制属性(color,font,text,line-height;height不生效)
- 继承失效：a标签的color;h标签的font-size
层叠性：选择器优先级相同
- 不同样式叠加；相同样式覆盖。

优先级

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important
覆盖范围越大，优先级越低

important权重最高，继承权重最低，但important不继承

<head>
<style>
    #box{
        color:orange;
    }
    .box{
        color:blue;
    }
    div{
        color:green !important;/*开发不建议使用*/
    }
    body{
        color:red;
    }
</style>
</head>
<body>
<div class="box" id="box" style="color:pink">priority</div>
</body>

权重叠加计算：复合选择器

（行内样式，id选择器，类选择器，标签选择器）

<head>
<style>
    /* (0,1,0,1) */
    div #one{
        color:orange;
    }
    /* (0,0,2,0) */
    .father .son{
        color:blue;
    }
    /* (0,0,1,1) */
    .father p{
        color:green 
    }
    /* (0,0,0,2) */
    div p{
        color:red;
    }
</style>
</head>
<body>
<div class="father">priority</div>
</body>

code2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
            width: 300px;
            height: 50px;background-color: red;
            display: inline-block;
            /*a显示模式是行内，不能设置宽高，需要display转换*/
            color:#fff;
            text-align: center;
            line-height: 50px;
        }
        a:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
    <a href="">导航1</a>
    <a href="">导航2</a>
    <a href="">导航3</a>
    <a href="">导航4</a>
    <a href="">导航5</a>
</body>
</html>

盒子模型

border边框线
- border:10px solid/dashed/dotted red,不分先后顺序
- 快捷键bd+tab
- 单方向边框：border-left/top/bottom:
padding内边距：边框和内容
- padding:top right bottom left 顺时针
  padding:top right&left bottom
  padding:top&bottom right&left
margin外边距：盒子外边距，边框与边框间
- 合并现象：垂直布局的块级元素，上下margin合并，取最大值
- 塌陷现象：互相嵌套的块级元素，子元素的margin-top会作用在父级元素上，导致父级元素一起下移
- 解决办法：
- 父元素设置border-top或者padding-top,分隔父子元素的margin-top
- 父元素设置overflow:hidden
- 转换成行内块元素
- 设置浮动
- 行内标签的margin/padding不改变垂直位置

code3

/* 从外到内：先宽高背景色，内容，内容位置，文字细节 */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        .box a{
            width: 80px;
            height: 40px;

            display: inline-block;
            text-align: center;
            line-height: 40;
            font-size: 12px;
            color:#4c4c4c;
            text-decoration: none;
        }
        .box a:hover {
            background-color: #edeef0;
            color:#ff8400;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="">导航1</a>
        <a href="">导航2</a>
        <a href="">导航3</a>
        <a href="">导航4</a>
    </div>
</body>
</html>

结构伪类选择器

减少对类的依赖，根据HTML的结构关系找元素，保持代码整洁
label:first/last-child{}
label:nth-child(n){}
label:nth-last-child(n){}
n数字：n从1开始
n公式：n从0开始
- 偶数：2n/even
- 奇数：2n+1/2n-1/odd
- 前5个：-n+5
- 从第5个往后：n+5

伪元素

CSS模拟的标签效果(父级元素)::before/after{}
默认行内元素，宽高不生效
必须加content:'',否则不生效

浮动

作用：图文环绕/div盒子环绕
特点：浮动元素脱离标准位置，不占位置；浮动比标准流高半个级别，覆盖标准流的元素；浮动的标签顶端对齐；具备行内块效果；浮动盒子无法margin:0 auto水平居中

清除浮动

设置父级元素高度
- 缺点：有些布局不能设置父级元素高度，如可变长度内容填充

额外标签：在父级元素内容的最后添加块级元素，块级元素设置clear:both

/* 子级浮动，父级未设置高度，可在父级内容添加 */
<head>
  <style>
      .clearfix {
          clea:both;
          /* 清除左右两侧浮动的影响 */
      }
  </style>
</head>
<body>
  <div>
      /* float1 */
      /* float2 */
      <div class="clearfix"></div>
  </div>
  <div class="standardStream">standardStream</div>
<body>

单伪元素清除法

/* 父级类<div class="class_n clearfix> */
.clearfix::after {
  content:'';
  display:block;
  clear:both;
  /* 隐藏伪元素 保持低版本兼容性*/
  height:0;
  visibility:hidden;
}

双伪元素清除法

.clearfix::before,
/*解决外边距塌陷问题
父子标签，都是块级，子级加margin会影响父级的位置*/
.clearfix::after {
  content:'';
  display:tavle;
}
.clearfix::after {
  clear:both;
}

父元素设置overflow
优缺点。。。。。。。。。。。

定位

网页常见布局形式

标准流：
- 块级元素独占一行：垂直布局
- 行内元素/行内块元素一行显示多个：水平布局
浮动：
- 可以让原本垂直布局的块级元素变成水平布局
定位：
- 元素自由地摆放在网页的任意位置
- 盒子间的层叠情况：定位后元素层级最高，可以叠在其他盒子上面
- 盒子始终固定在屏幕的某个位置，如导航栏

定位方式

position:static/relative/absolute/fixed
设置偏移值left/top:
同级定位，下压上;z-index设置

相对定位：
- 相对自己原来的位置移动，原有占位不变(没有脱离标准流控制)
绝对定位：
- 如果有已经定位的父级，以就近定位父级为参照物；否则浏览器窗口为参照物。
- 脱离标准流，不占位
- 不能实现margin auto居中
```
/* 居中显示 */
position:absolute;
left:50%;
margin-left:-150px/*水平距离一半*/
/*translate(-50%,0);*/
```
- 变成行内块的显示模式:加宽度高度生效，如果没有宽度也没有内容，盒子的宽度尺寸是0
- 子绝父相：子级绝对定位，父级相对定位
固定定位
- 脱标，相对于浏览器窗口
- 行内块特点

vertical-align

浏览器处理行内和行内块默认按基线对齐导致
baseline;top;bottom;middle;

/* 文本框和图片基线对齐 */
input{
    height:50px;
    box-sizing:boder-box;
    vertical-align:middle;
}

/* 父级div由文字内容撑开：图片取消基线对齐的两种处理模式 */
img{
    vertical-align:middle;
    display:block;
}

/* 图片垂直 水平居中 */

.father{
    width:600px;  /* 图片垂直居中 */
    height:600px;
    background-color:pink;
    line-height:600px;  /* 图片垂直居中 */
    /* 图片水平居中：处理行内和行内块按文字 */
    text-align:center;
}
img{
    vertical-align:middle;  /* 图片垂直居中 */
}

Next Post

Git
Previous Post

HTML