重学css 0x1 CSS基础

最新推荐文章于 2024-08-13 20:49:47 发布

cellinlab

最新推荐文章于 2024-08-13 20:49:47 发布

阅读量121

点赞数

本文链接：https://blog.csdn.net/funkstill/article/details/104444995

版权

前端基础专栏收录该内容

167 篇文章 0 订阅

订阅专栏

Cascading Style Sheet （层叠样式表）

选择器

基于性能考虑，选择器是从右往左解析的，可以更快匹配

选择器分类

元素选择器 a {}
伪元素择器 ::before{}
类选择器 .link {}
属性选择器 [type=radio]{}
伪类选择器 :hover{} 伪类是一种状态
ID选择器 #id {}
组合选择器 [type=checkbox] + label {}
否定选择器 :not (.link){}
通用选择器 * {}

选择器权重

ID选择器 #id{} +100
类属性伪类 +10
元素伪元素 +1
其他选择器 +0

实例计算一个不进位的数字即十一个类也小于一个ID

#id .link a[href] => #id +100 ,.link +10 , a +1， [href] +0 ==> 111

#id ,link .active => #id +100, .link +10, .active +10 ==> 120

特殊优先级

!important 优先级最高
元素属性优先级高
相同权重后写的生效（即同级覆盖）

非布局样式

字体、字重、颜色、大小、行高

字体族

serif
sans-serif
monospace
cursive
fantasy

多字体fallback

从做往右，从特殊到兼容

网络字体、自定义字体

<style>
    @font-face {
        font-family: 'IF';
        src: url('./IndieFlower.tif');
    }
</style>

iconfont

行高

行高的构成

行高是由linebox决定，linebox由inlinebox决定

行高相关的解决方案

lineheight可以实现垂直居中，可以通过vertical-align调整对齐位置

行高的调整

默认基于baseline，故图片下方有空隙

背景、边框

背景颜色

body{
    background:yellow;
}

渐变色背景

.c2{
    height:90px;
    /* background: -webkit-linear-gradient(left, red, green); */
    background: linear-gradient(to right, red, green);
}

.c2{
    height:90px;
    background: linear-gradient(135deg, red 0, green 10%, yellow 50%, blue 100%);
}

多背景叠加

.c2{
    height:90px;
    background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%),
        linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);
    background-size: 30px 30px;
}

背景图片和属性（雪碧图）

雪碧图原理：缩放，平移定位

.c2{
    width:20px;
    height:20px;
    background:url(./test_bg.png) no-repeat;
    background-position: -17px -5px;
    background-size: 261px 113px;
}

base64和性能优化

图片转文本，节省了HTTP请求，但是会增加文件大小，多用于小图标。同时会增加解码时间。

多分辨率适配

backgroun-size调整

边框

边框的属性线性大小颜色
边框背景图

边框衔接

.c3 {
    width: 400px;
    height: 200px;
    border-bottom: 30px solid red;
    border-right: 30px solid blue;
    border-left: 30px solid transparent;
}

.c3 {
    width: 0px;
    height: 200px;
    border-bottom: 30px solid red;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
}

.c3 {
    width: 0px;
    height: 200px;
    border-bottom: 30px solid red;
    border-radius: 30px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
}

滚动、换行

滚动

换行

overflow-wrap（word-wrap）通用换行控制是否保留单词
word-break 针对多字节文字（汉字）中文句子也可以设置为单词
white-space 空白处是否断行

粗体、斜体、下划线

font-weight 粗体
font-style: italic 斜体
下划线 text-decoration text-decoration: underline;
指针 cursor

补充

hack属性放置在常规属性前面

CheckBox案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>checkbox</title>
    <style>
        .checkbox{

        }
        .checkbox input{
            display: none;
        }
        /*+ 为相邻兄弟选择器*/
        .checkbox input + label{
            background:url(./checkbox1.png) left center no-repeat;
            background-size:20px 20px;
            padding-left:20px;
        }
        .checkbox input:checked + label{
            background-image:url(./checkbox2.png);
        }
    </style>
</head>
<body>
    <div class="checkbox">
        <input type="checkbox" id="handsome"/>
        <label for="handsome">Hello</label>
    </div>
</body>
</html>

cellinlab

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
重学css 0x1 CSS基础

Cascading Style Sheet （层叠样式表）选择器基于性能考虑，选择器是从右往左解析的，可以更快匹配选择器分类元素选择器 a {} 伪元素择器 ::before{} 类选择器 .link {} 属性选择器 [type=radio]{} 伪类选择器 :hover{} 伪类是一种状态 ID选择器 #id {} 组合选择器 [type=checkbox] + la...
复制链接

扫一扫

专栏目录