CSS笔记

最新推荐文章于 2022-09-18 08:00:00 发布
最新推荐文章于 2022-09-18 08:00:00 发布
阅读量112 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GaoZhuoLin/article/details/107594555
版权

css

这里是{css}

@import和link的区别：

①加载顺序不同，@import先加载完HTML文件，再加载css文件；link会同时加载
②@import只能引入css文件，link还可以引入其他内容
③@import有兼容性，link没有兼容性
④@import会增加页面的http请求
⑤JavaScript操作DOM时，只能操作link引入的css

1、引入方式

1）行内样式 内联样式——只对当前元素生效

<div style=""></div>

2）内部样式——只对当前页面生效

<head>
    <style>
        选择器{
            属性:属性值;
            属性:属性值;
        }
    </style>
</head>

3）外部样式——实现了内容与表现的分离，提高了代码的可重用性和可维护性

<head>
    <link rel="stylesheet" href="1.css">
</head>

4）导入式

<head>
    <style>
        @import "1.css";
    </style>
</head>

2、选择器

1）基础选择器
全局选择器
*{}
选中页面所有元素

元素选择器
div{}
p{}
a{}
选中所有指定的元素

类选择器
.className{}
类名可以重复
一个class可以起多个名字，用空格隔开

ID选择器
#idName{}
ID名字具有唯一性

选择器的优先级：
行内样式>ID选择器>类选择器>元素选择器>全局选择器
权重： 1000 100 10 1

合并选择器
选择器1,选择器2,…{}

交集选择器
div.box{}

2）关系选择器
后代选择器
选择器1 选择器2{}
选中所有符合条件的后代

子代选择器
选择器1>选择器2{}
选中所有直接子代

相邻兄弟选择器
选择器1+选择器2{}
后面挨着的一个兄弟

通用兄弟选择器
选择器1~选择器2{}
后面所有的兄弟

3）伪类选择器
:link 点击之前(适用于a)
:visited 点击之后(适用于a)
:hover 鼠标悬停(适用于所有元素)
:active 鼠标按下(适用于所有元素)

:first-child 第一个子元素是…
:last-child 最后一个子元素是…
:nth-child(number|odd|even|倍数) 第几个子元素是…

:first-of-type 第一个子元素
:last-of-type 最后一个子元素
:nth-of-type(number|odd|even|倍数) 第几个子元素

:only-child 唯一一个子元素是…
:empty 空的子元素
:not(选择器) 否定

:focus 获取焦点
:checked 被选中

4）伪对象选择器 伪元素选择器
::before{
content:"";
}
::after{
content:"";
}

5）属性选择器
[属性]
[属性=属性值]
元素[属性=属性值]
元素[属性^=值] 开头
元素[属性$=值] 结尾
元素[属性*=值] 包含

3、字体的属性——继承性

1）字体大小
font-size:16px;

2）颜色
color:;

3）字体是否加粗
font-weight:;
normal|bold|100-900
normal = 400
bold = 700

4）字体样式
font-style:;
normal|italic

5）字体
font-family:字体1,字体2,…;

4、文本的属性——继承性

1）元素内容水平对齐方式
text-align:left|center|right;

2）文本装饰
text-decoration:underline|none;

5、列表的属性

1）设置项目符号
list-style-type:none;
2）简写
list-style:none;

6、表格的属性

1）表格水平居中
margin:0 auto;

2）元素大小
width:;
height:;

3）背景属性
background:;

4）字体颜色
color:;

5）边框折叠(相当于cellspacing=“0”)
border-collapse:collapse;

6）内容距边框的距离
padding:;

7）边框
border:style width color;

8）表格内容水平对齐方式
text-align:left|center|right;

9）单元格内容垂直对齐方式(写在tr或者td上)
vertical-align:middle|top|bottom;

7、内容溢出

overflow:;
visible 默认值
hidden 溢出部分隐藏
auto 自动
scroll 滚动条

8、背景的属性

1）背景颜色
background-color:transparent;

2）背景图片
background-image:url("");

3）背景图片大小
background-size:x y;

4）背景图片是否平铺
background-repeat:repeat|no-repeat;

5）背景图片位置
background-position:x y;

6）背景图片固定
background-attachment:fixed|scroll;

7）简写
background:;

9、盒模型

1）标准盒模型 w3c盒模型
①组成部分
content+padding+border+margin

②实际大小
width+padding+border+margin
height+padding+border+margin

③content 内容区域
width:;
height:;
min-width:;
max-width:;
min-height:;
max-height:;

块级元素默认宽度为100%，行内元素默认宽度由内容撑开
块级元素和行内元素高度都由内容撑开

块级元素可以设置宽高，行内元素设置宽高不生效

④padding 内边距 不可以取负值和auto
设置内容距边框的距离

padding:value; 四周
padding:value value; 上下 左右
padding:value value value; 上 左右 下
padding:value value value value; 上 右 下 左

padding-top:;
padding-left:;
padding-right:;
padding-bottom:;

⑤border 边框
border-style:solid|none; 必须属性 3px 黑色
border-width:;
border-color:;

简写：
border:width style color; 四周

border-top:width style color;
border-right:width style color;
border-bottom:width style color;
border-left:width style color;

⑥margin 可以取正负、auto
设置元素之间的距离

margin:value; 四周
margin:value value; 上下 左右
margin:value value value; 上 左右 下
margin:value value value value; 上 右 下 左

margin-top:;
margin-left:;
margin-right:;
margin-bottom:

注意：
a、垂直方向上外边距合并问题
当垂直方向上外边距相撞时，取较大值
浮动元素不合并

b、margin-top问题
第一个子元素设置margin-top:; 父元素会跟着子元素一起下来

解决:
父元素加overflow:hidden;
父元素或者子元素浮动
父元素加padding-top:1px;
父元素加border:1px solid transparent;

应用：
块级元素水平居中：
margin:0 auto;

2）怪异盒模型 IE盒模型
1）标准盒模型 w3c盒模型
①组成部分
content+padding+border+margin

②实际大小
width+margin
height+margin

宽高包含了padding和border

③盒模型相互转换
box-sizing:content-box; 默认值 标准盒模型
box-sizing:border-box; IE盒模型

3）弹性盒模型 伸缩盒模型 flexBox
主要用于移动端
在弹性盒中，float、clear、vertical-align不生效

①父元素上的属性
a、开启弹性盒模型
display:flex;
子元素默认水平排列，块级元素默认宽度由100%转换为由内容撑开

b、设置弹性盒的方向
flex-direction:;
row：默认值 子元素从左往后水平排列
column：子元素从上往下垂直排列
row-reverse：子元素从右往左水平排列
column-reverse：子元素从下往上垂直排列

c、设置子元素在主轴的对齐方式
默认x为主轴，y为侧轴；当子元素垂直排列时，y为主轴，x为侧轴
justify-content:;
flex-start: 默认值
flex-end：弹性盒结束
center：居中
space-between:在子元素之间平均分配父元素剩余的空间
space-around：在子元素四周分配父元素剩余的空间，两端的距离是中间的一半

d、设置子元素在侧轴的对齐方式
align-items:;
flex-start: 默认值
flex-end：弹性盒结束
center：居中

②子元素上的属性
flex-grow:number;
设置子元素怎么分配父元素剩余的空间

10、浮动

1）原理
浮动后排除到普通文档流之外，在页面中不占据位置
浮动是碰到父元素的边框或者浮动元素的边框就会停止
浮动不会重叠
浮动只有左右浮动
浮动后转换为块级元素

2）语法
float:left|right|none;

3）清除浮动的影响
父元素不设置高度，默认高度由内容撑开，如果子元素浮动，父元素的高度会坍塌，在页面中不占据位置，对后面的元素产生影响

方法：
①父元素设置高度(高度已知)
②父元素设置overflow:hidden|auto;(自动找高)
③空div法
浮动元素后面加一个空div
空div{clear:both;}
④伪对象法
父元素::after{
content:"";
display:block;
clear:both;
}
⑤受影响的元素加clear:both;(父元素的高度没有找到)

11、元素定位

1）属性
position:;
2）属性值
①static 默认值 静态定位 没有定位
②relative 相对定位
相对于自己原位置定位
定位后原位置保留
配合left、right、top、bottom移动

应用场景：
自己小范围移动
配合绝对定位使用

③absolute 绝对定位
相对于已经定位(static除外)的父元素定位，如果父元素没有定位，逐级网上找，最后相对于body定位
定位后原位置不保留
配合left、right、top、bottom移动

应用场景：
形成独立的一层

④fixed 固定定位
相对于浏览器窗口定位
定位后原位置不保留
配合left、right、top、bottom移动

应用场景：
固定在页面某个位置

⑤sticky 相对定位和固定定位的结合

3）堆叠顺序
z-index:number;
默认值 auto 跟父元素一个层级
取值越大，层级越往上
可以取负值

必须要配合定位(static除外)使用

同时定位，后面的元素会覆盖前面的元素

12、display

block 块级元素
inline 行内元素
inline-block 行内块
none 不显示
flex 弹性盒
table 表格
table-cell 单元格

13、C3新特性

1）弹性盒模型
2）选择器(伪类选择器、伪对象选择器、属性选择器)
3）圆角
border-radius:;
border-radius:50%;
4）盒阴影
box-shadow:水平方向偏移位置 垂直方向偏移位置 模糊度 阴影尺寸 颜色 位置;
必需 必须 可选 可选 可选 可选
正负 正负 正值 正负 outset|indeterminate
5）字阴影
text-shadow:水平方向偏移位置 垂直方向偏移位置 模糊度 颜色;
6）背景渐变
①线性渐变
background-image: linear-gradient(方向,颜色1,颜色2,…);

②径向渐变
background-image: radial-gradient(中心点,形状,颜色1,颜色2,…);
7）转换 变型
①属性
transform:translate() rotate() scale() skew();
②属性值
a、位移 单位px %
transform:translate(x,y);

transform:translateX();
transform:translateY();

b、旋转 单位deg(弧度)
transform:rotate(30deg);
正值 顺时针
赋值 逆时针

c、缩放 取值number 0-1：缩小 >1:放大 默认1
transform:scale(x,y);

transform:scaleX();
transform:scaleY();

d、倾斜 单位deg
transform:skew(x,y)

transform:skewX();
transform:skewY();

8）过渡
①过渡的属性——必须
transition-property: 属性1,属性2,…;
可以过渡的属性：
取值为颜色
取值为数值
阴影
背景渐变
转换

简写all

②过渡的持续时间——必须
transition-duration:时间1,时间2,… ;
单位s|ms

③过渡的速度变化类型——可选
transition-timing-function: ;
ease 默认值 先加速后减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
linear 匀速

④过渡的延迟时间——可选
transition-delay: ;
单位s|ms
可以取负值

⑤简写
transition:all 持续时间 速度变化类型 延迟时间;

9）动画
①定义动画
@keyframes name{
0%|from{}
百分比{}
100%|to{}
}

②调用动画
animation:name 持续时间 速度变化类型 延迟时间 播放次数(number|infinite) 播放方法(alternate) 停在最后一帧(forwards);

animation-play-state:running|paused;

10）iconfont
11）厂商前缀
解决浏览器对C3新特性的支持
浏览器 厂商前缀 内核
谷歌 -webkit- blink
火狐 -moz- gecko
欧朋 -o- blink
IE -ms- trident
苹果 -webkit- webkit

12）css hack
解决IE低版本兼容性问题
①条件hack

②属性前缀和后缀
前缀 + - _ # *
后缀 \0 \9 \9\0 !important

13）媒体查询
实现响应式布局(写一次样式兼容所有终端)

①内部引入
<!--移动端-->
@media screen and (max-width:768){}
<!--ipad端-->
@media screen and (max-width:992) and (min-width:768px){}
<!--pc端-->
@media screen and (min-width:992){}


②外部引入
<!--移动端-->
<link rel="stylesheet" href="" media="screen and (max-width:768)"/>
<!--ipad端-->
<link rel="stylesheet" href="" media="screen and (max-width:992) and (min-width:768px)"/>
<!--pc端-->
<link rel="stylesheet" href="" media="screen and (min-width:992)"/>

14）多列
文本分成多列
column-count: ;
column-gap: ;
column-rule: style width color;

14、居中问题

1）元素内容水平居中
text-align:center;
2）块级元素水平居中
margin:0 auto;
3）一行文字垂直居中
行高等于高
4）子元素在父元素中水平垂直居中
①子元素宽高已知

a、弹性盒法
<style>
    .box{
        width: 500px;
        height: 500px;
        background-color: red;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: gold;
    }
</style>

b、绝对定位+位移
<style>
    .box{
        width: 500px;
        height: 500px;
        background-color: red;
        position: relative;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: gold;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>

c、margin
<style>
    .box{
        width: 500px;
        height: 500px;
        background-color: red;
        overflow: hidden;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: gold;
        margin: 150px;
    }
</style>

d、padding
<style>
    .box{
        width: 500px;
        height: 500px;
        background-color: red;
        padding: 150px;
        box-sizing: border-box;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: gold;
    }
</style>

e、relative
<style>
    .box{
        width: 500px;
        height: 500px;
        background-color: red;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: gold;
        position: relative;
        top: 150px;
        left: 150px;
    }
</style>

f、绝对定位
<style>
    .box{
        width: 500px;
        height: 500px;
        background-color: red;
        position: relative;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: gold;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -100px;
    }
</style>

g、表格法
<style>
    .box{
        width: 500px;
        height: 500px;
        background-color: red;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: gold;
        display: inline-block;
    }
</style>

②子元素宽高未知
a、弹性盒法

<style>
    .box{
        width: 500px;
        height: 500px;
        background-color: red;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box1{
        background-color: gold;
    }
</style>

b、绝对定位+位移
<style>
    .box{
        width: 500px;
        height: 500px;
        background-color: red;
        position: relative;
    }
    .box1{
        background-color: gold;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>

15、三栏布局

左右两个固定不动，中间的宽度跟着浏览器的宽度去变化

1）弹性盒法
<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
<style>
    .box{
        display: flex;
    }
    .left{
        width: 200px;
        height: 200px;
        background-color: palegoldenrod;
    }
    .right{
        width: 200px;
        height: 200px;
        background-color: palegreen;
    }
    .center{
        height: 200px;
        background-color: deepskyblue;
        flex-grow: 1;
    }
</style>

2）绝对定位法
<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
<style>
    .box{
        position: relative;
    }
    .left{
        width: 200px;
        height: 200px;
        background-color: palegoldenrod;
        position: absolute;
        top: 0;
        left: 0;
    }
    .right{
        width: 200px;
        height: 200px;
        background-color: palegreen;
        position: absolute;
        top: 0;
        right: 0;
    }
    .center{
        height: 200px;
        background-color: deepskyblue;
        margin-left: 200px;
        margin-right: 200px;
    }
</style>

3）浮动
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>
<style>
    .box{
    }
    .left{
        width: 200px;
        height: 200px;
        background-color: palegoldenrod;
        float: left;
    }
    .right{
        width: 200px;
        height: 200px;
        background-color: palegreen;
        float: right;
    }
    .center{
        height: 200px;
        background-color: deepskyblue;
    }
</style>

16、雪碧图 css精灵 css sprite

1）定义
图片整合技术
把许多小图整合到一张大图上面

2）优点
①减少页面的http请求
②减少图片字节数
③减少命名困扰

3）原理
background-images:;
background-position:;

17、一行文字溢出省略号显示

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

Keep it real
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css笔记
04-02
css笔记是自己最近没啥事,重新的梳理了一遍之后,写的,为了帮助自己提高,希望对看到笔记的人,也能有所帮助.
选择器 background 背景 背景图片平铺 边框 border Border简写
weixin_34381666的博客
10-19 202
1. 浏览器默认字体大小是font-size:16px;谷歌最小字体是10px，其他浏览器是12px。 Font属性可以继承详细的知识见 9.11 2. 选择器 通配符选择器 * 所有的标签 标签 class id 后代子代交集 3. background 背景 A.背景颜色 简写background：red； B.背景图片 bac...
前端学习（二）CSS基础1
whitefish520的博客
07-22 8908
什么是CSS CSS的引入： 由于HTML只关注内容的语义，导致单纯用HTML做出的网页很丑 在HTML中设置样式非常不方便，也非常繁琐 使用CSS能让网页更加美观 CSS让HTML从样式中脱离，HTML专门做结构，CSS专门做样式 CSS的定义：层叠样式表（Cascading Style Sheets），用来做网页的样式，CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景控制以及整体排版等，而且还可以针对不同的浏览器设置不同的样式 CSS的作用：主要用于设置HTML页面中的文本内容（字体、大
CSS学习笔记
m0_58761900的博客
09-18 2999
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
CSS笔记.pdf
07-14
CSS笔记.pdf
css笔记css笔记css笔记
04-03
css笔记
html css笔记
01-27
html css 笔记
CSS笔记全面手册
04-07
CSS手册，内容包含CSS几乎全部内容，可以作为手册快速学习，复习
html/css笔记
11-18
本笔记采用节点图模式完整详细介绍html/css基础语法样式
CSS笔记(1).pdf
01-26
css的笔记
狂神说视频-CSS笔记.pdf
11-12
主要根据狂神说的视频整理CSS
CSS笔记一
03-15
NULL 博文链接：https://hotpepper.iteye.com/blog/325882
css笔记整理_1.pdf
02-26
css笔记整理（精简） 初识CSS CSS语法 CSS样式引入 css选择器 CSS中的块级元素与行内元素 background 背景(集合样式) font 文字(集合样式) border 边框(复合样式，集合样式) CSS 框模型概述
CSS笔记-011
08-03
1.简介盒子模型是网页布局的基础，将页面中所有的元素都看作成一个盒子，盒子都包含以下几个属性：width 宽度height 高度border 边框margin
部分CSS笔记.docx
09-08
部分CSS笔记.docx
pink老师css笔记
最新发布
08-17
很抱歉，我无法根据提供的引用内容回答你的问题，因为引用内容并没有提到"Pink老师CSS笔记"这个话题。如果你有关于"Pink老师CSS笔记"的具体问题，我将非常乐意帮助你回答。<span class="em">1</span><span class="em...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值