CSS零基础笔记

基础认知

书写位置:
css应该书写在head标签内title标签下面
范例:

<!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>
        /* 这个是css的注释 */
        /* 这里写的都是css */
        /* 选择器{css属性} */
        /* 选择器:查找标签 */
        p {
            /* 文字颜色变成红色 */
            color: red;
            /* 字变大 px:像素 */
            font-size: 30px;
            /* 背景颜色 */
            background-color: green;
            /* width:宽度 */
            width: 400px;
        }
    </style>
</head>
<body>
    <p>这个是段落标签</p>
</body>
</html>

CSS引入方式

内嵌式:
css写在style标签中 适合小案例
提示:style标签虽然可以写在页面的任意位置,但是通常约定写在head标签中
范例:

<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>
        p {
            /* 文字颜色变成红色 */
            color: red;
        }
    </style>
    </head>
<body>
    <p>这个是段落标签</p>
</body>

外联式:
css写在一个单独的.css文件中 项目中
提示:需要通过link标签在网页中引入
范例:

<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>
    
    <!-- 关系:样式表 -->
    <link rel="stylesheet" href="./my.css">
</head>

单独写的一页css代码:

/* 选择器 {} */
p {
    color: gray;
}

行内式:
css写在标签的style属性中 配合js使用
提示:基础班不推荐使用,之后会配合js使用
范例:

	<div style="color: green;">这个是div标签</div>

基础选择器

1.标签选择器

	<style>
        /* 标签选择器:就是以标签名命名的选择器 */
        p {
            color: gray;
        }
        /* 标签选择器 选中所有的这个标签都生效css */
    </style>

2.类选择器

类选择器:
结构:.类名{css属性名: 属性值;}
注意点:
1.类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
2.一个标签可以同时由多个类名,类名之间以空格隔开
范例:

<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>
        .black {
            color: black;
        }
        .size {
            font-size: 66px;
        }
        p {
            color: green;
        }
    </style>
</head>
<body>
    <p>11111</p>
    <!-- 一个标签可以使用多个类名 需要用空格隔开即可 -->
    <p class="black size">22222</p>
</body>

3.id选择器

结构:
#id属性值{css属性名: 属性值;}
注意点:
id属性值类似于身份证号码,在一个页面中是唯一的
范例:

<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>
        #blue {
            color: blue;
        }
    </style>
</head>
<body>
    <p id="blue">段落标签</p>
</body>

4.通配符选择器

结构: {css属性名: 属性值;}*
注意点:
开发中极少使用,只会在极特殊的情况下才会使用到
在小页面中可能会用于去除标签默认的margin和padding
范例:

<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>
        * {
            color: yellow;
        }
    </style>
</head>
<body>
    <p>我是段落标签</p>
    <h1>ppppp</h1>

字体和文本样式

1字体大小:

属性名:font-size
取值:数字 + px
注意点:
谷歌浏览器默认文字大小是16px
单位需要设置,否则无效

2字体粗细:

属性名:font-weight
取值:
关键字 :正常 normal
加粗 bold
纯数字: 正常 400
加粗700
注意点:
不是所有字体都提供了九种粗细,因此部分取值页面中无变化
实际开发中:正常、加粗两种取值使用最多

3字体是否倾斜:

属性名:font-style
取值:正常 normal
倾斜 italic

4字体系列:

属性名:font-family
常见取值:
具体字体1,具体字体2,具体字体3…字体系列
具体字体:
“Micsoft YaHei”、微软雅黑
字体系列:sans-serif serif monospace
渲染规则:
1.从左往右按顺序查找,如果电脑中未安装该字体,则显示下一个字体
2.如果都不支持,此时会根据操作系统,显示最后字体系列的默认字体
注意点:
如果字体名称中存在多个单词,推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发时,尽量使用是同常见自带字体,保证不同用户

5.font属性:

一个属性冒号后面书写多个值的写法 — 复合属性
省略要求:
只能省略前两个,如果省略了,相当于设置了默认值
注意点:
如果需要同时设置单独和连写的形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
例子:
写在下面
font: italic 700 66px 宋体;
font-style: normal;

6.文本缩进

属性名:
text-indent
取值:
01.数字:px
02.数字+em(推荐:1em = 当前标签的font-size的大小)
范例:

		p {
            text-indent: 4em;
        }
7.文本水平对齐方式

属性名:
text-align
取值:
left:左对齐
center:居中对齐
可以使1.文本、2. span标签、3. a标签、4. input标签 5. img标签
right:右对齐
注意点:
如果需要让以上元素水平居中,text-align属性给文本所在标签(文本的父元素)设置。
范例:

		h1 {
            text-align: center;
        }
8.文本修饰

属性名:
text-decoration
取值:
underline 下划线(常用)
line-through 删除线(不常用)
overline 上划线(几乎不用)
none 无装饰线(常用)
注意点:
开发中会使用text-decoration : none; 清除a标签默认的下划线

		div {
            text-decoration: underline;
        }
        p {
            text-decoration: none;
        }
9.行高

作用:
控制一行的上下行间距
属性名:
line-height
取值:
01.数字+px
02.倍数(当前标签font-size的倍数)
应用:
1.让单行文本垂直居中可以设置line-height:文字父元素高度
2.网页精准布局,会设置line-height:1 取消上下间距
行高与font连写的注意点:
如果同时设置了行高和font连写,注意覆盖问题
font:style weight size/line-height family;

选择器进阶

1.后代选择器

作用:
找到div的儿子p设置文字颜色
语法:
父选择器 后代选择器 {css}
范例:

		div p {
            color: red;
        }
2.子代选择器

选择器语法:
选择器1 > 选择器2{css}
作用:
只能够让子代的选择器起作用 孙子 重孙子不选
范例:

		div > a {
            color: red;
        }
3.并集选择器

语法:
选择器1 , 选择器2 {css}
作用:
同时选择多组标签,设置相同的样式
范例:

		p,
        div,
        span {
            color: red;
        }
4.交集选择器

语法:
选择器1选择器2 {css}
注意:
选择器1与选择器2之间什么都不能加
范例:

		p.box {
            color: red;
        }
5.hover伪类选择器

作用:
选中鼠标悬停在元素上的状态,设置样式
语法:
after选择器:hover {css}
任何标签都可以添加伪类选择器
范例:

		p:hover {
            color: red;
        }

背景相关属性

1.背景颜色

属性名:
background-color(bgc)
范例:

 		p {
            background-color: rgba(118, 48, 48, 0.5);
        }
2.背景图片

属性名:
background-image(bgi)
属性值:
url(图片路径)
范例:

		p {
            background-image: url();
        }
3.背景平铺

属性名:
background-repeat(bgr)
属性值: 效果:
repeat (默认值)水平和垂直方向都平铺
no-repeat 不平铺
repeat-x 沿着水平方向(x轴)平铺
repeat-y 沿着垂直方向(y轴)平铺

4.背景位置:

属性名:
background-position(bgp)
正数:
向右向下移动;
负数:
向左向右移动
注意:
背景色和背景图只显示在盒子里面
范例:

 		p {
            background-position: 0 0;
        }
4.背景相关属性连写

属性名:
background
属性值:
单个属性值的合写,取值之间以空格隔开
书写顺序:
推荐: background: color image repeat position

元素显示模式

1.块级元素

显示特点:
1.独占一行(一行只能显示一个)
2.宽度默认是父元素的宽度,高度默认由内容撑开
3.可以设置宽高
代表标签:
div、p、h系列、ul、li、dl、dt

2.行内元素

显示特点:
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高
代表标签:
a、span、b、u、i、s、strong、ins…

3.行内块元素

显示特点:
1.一行可以显示多个
2.可以设置宽高
代表元素:
input textarea button select
特殊情况:
img标签有行内块元素的特点,但是Chrome调试工具中显示结果是inline

4.元素显示模式转换

目的:
改变元素默认的显示特点,让元素符合布局要求
语法:

属性: display:block 效果: 转换成块级元素
属性: display:inline-block 效果: 转行成内行块元素
属性: display:inline 效果: 转换成行内元素

5.HTML嵌套规范注意点:

1.块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等
但是:p标签中不要嵌套div、p、h等块级元素
2.a标签内部可以嵌套任意
但是:a标签中不能嵌套a标签

盒子模型

1.盒子模型的介绍

盒子模型的概念:
1.页面中的每一个标签,都可以看做一个"盒子",通过盒子的视角更方便的进行布局
2.浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为盒子
盒子模型
css中规定每个盒子分别由:内容区域(content)内边距区域(padding)边框区域(border)外边距区域(margin) 构成,这就是盒子模型
记忆:
可以联想显示张的包装盒
范例:

	<style>
        div {
        	/* 设置盒子的宽高,背景颜色 */
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 设置盒子边框线 */
            border: 1px solid #000;
            /* 设置内边距 */
            padding: 20px;
            /* 外边距:出现在两个盒子之间,出现在盒子外面 */
            margin: 20px;
        }
    </style>

效果图:
在这里插入图片描述

2.内容区域的宽度和高度

作用:
利用width和height属性默认设置是盒子内容区域的大小
属性: width/height
常见取值: 数字+px
范例:

		div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
3.边框

属性名: border
属性值: 单个取值连写,取值之间以空格隔开
如:border: 10px(像素大小) solid(线的种类) red(线的颜色) ;
快捷键:bd + tab
如果只给盒子某个方向单独设置边框
属性名:border-方位名词
属性值:连写取值
范例:

		div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 给盒子左边加边框 */
            border-left: 5px solid red;
        }

效果图:
在这里插入图片描述

4.内边距

padding 属性可以当作复合属性使用,表示单独设置某个方向的内边距
padding最多取4个值
四个值分别表示:上 右 下 左
三个值分别表示:上 左右 下
两个值分别表示:上下 左右

5.自动內减

自动内减: 给盒子设置属性box-sizing : border-box; 即可
优点: 浏览器会自动计算多余大小,自动在内容中减去

6.外边距

margin 属性

7.外边距折叠现象-合并现象

出现场景: 垂直布局的块级元素,上下合并margin会合并
结果: 最终两者距离为margin的最大值
解决方法: 避免就好
只给其中一个margin盒子设置margin即可

浮动

1.结构伪类选择器

作用:
根据元素在HTML中的结构关系查找元素
优势:
减少对于HTML中类的依赖,有利于保持代码整洁
场景:
常用于查找某父级选择器中的子元素
n的注意点:
n的常见公式:
偶数 2n、even
奇数 2n+1、2n-1、odd
找到前5个 -n+5
找到从5个往后 n+5
范例:

		li:first-child{
            /* 匹配父元素中第一个子元素,并且是li元素 */
            color: red;
        }
        li:last-child {
            /* 选中最后一个元素 */
            color: green;
        }
        li:nth-child(3) {
            /* 任意一个元素,第三个元素 */
            color: black;
        }
        li:nth-last-child(2) {
            /* 倒数第2个元素 */
            color: orange;
        }
2.伪元素

伪元素:
一般页面中的非主体内容可以使用伪元素
区别:
1.元素:HTML设置的标签
2.伪元素:由CSS模拟出来的标签效果
种类: 作用:
::before 在父类元素内容的最前面加一个伪元素
::after 在父类元素内容的最后面加一个伪元素
注意点:
1.必须设置content属性才能生效
2.伪元素默认是行内元素,宽高不生效
3.添加中文一定要加引号""
范例:

		.fathor {
            width: 300px;
            height: 300px;
            background-color: #ccc;
            
         }
        .fathor::before {
            content: "老鼠";
        }
        .fathor::after {
            content: "大米";
        }

效果图:
在这里插入图片描述

3浮动:

浮动的标签是顶对齐的
1.浮动的作用: 网页布局
2.浮动的代码 float: left;
3.浮动的特点:
3.1. 浮动的元素会脱离标准流(简称脱标),在标准流中不占位置相当于从地面飘到空中
3.2. 浮动元素比标准流高半个级别,可以覆盖标准流中的元素
3.3. 浮动找浮动 下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素有特殊的显示效果,一行可以显示多个,可以设置宽高
注意点:
浮动的元素不能通过text-align:center或者margin:0 auto

4清除浮动

含义: 清除浮动带来的影响
影响: 如果子元素浮动了,此时子元素不能撑开标准流的块级元素
原因: 子元素浮动后脱标—>不占位置
目的: 需要父元素有高度,从而不影响其他网页元素的布局
清除浮动的方法:—额外标签法
操作
1.在父元素内容的最后添加一个块级元素
2.给添加的块级元素设置clear:both(清除左右两侧浮动的影响)
特点:
缺点: 会在页面中添加额外的标签,会让页面的HTML结构变得复杂

定位

1定位的介绍

定位的使用步骤
1.设置定位方式
属性名:position
常见属性值:
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
2.设置偏移值
偏移值设置分为两个方向,水平和垂直方向各选一个使用即可
选取的原则一般是就近原则(离哪一个近用哪一个)
作用:
1.可以让元素自由的摆放在网页的任意位置
2.一般用于盒子之间的层叠情况

2.相对定位

介绍: 自恋型定位,相对于自己之前的位置进行移动
代码: position:relative;
特点:
1.需要配合方位属性实现移动
2.相对于自己原来位置进行移动
3.在页面中占位置—>没有脱标
4.占有原来的位置
5.仍然具有标签原有的显示模式
应用场景:
1.配合绝对定位组CP(子绝父相)
2.用于小范围
注意点: 如果left和right都有以left为准,如果top和bottom都有以left为准

范例:

		.box {
            position: relative;
            left: 100px;
            top: 200px;
        }
3.绝对定位

介绍: 拼爹行定位,相对于非静态定位的父元素进行定位移动
代码: position:absolute
特点:
1.需要配合方位属性实现移动
2.默认相对于浏览器可视区域进行移动
3.脱标,在页面中不占位置
应用场景:
1.配合绝对定位组CP(子绝父相)
范例:

		.box {
            position: absolute;
            left: 50px;
            top: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
4固定定位

介绍: 死心眼型定位,相对于浏览器进行定位移动
代码: position:fixed
特点:
1.需要配合方位属性实现移动
2.相对于浏览器可视区域进行移动
3.在页面中不占位置—> 脱标
应用场景:
1.让盒子固定在屏幕中的某个位置
范例:

 		.box {
            position: fixed;
            left: 300px;
            width: 600px;
            height: 50px;
            background-color: pink;
        }
5元素的层级关系

默认情况下,定位的盒子 后来者居上
z-index:整数数字; 取值越大,显示顺序越靠上 ,z-index的默认值为0
注意:z-index必须配合定位才能生效

6装饰

垂直对齐方式:
属性名: vertical-align
属性值: baseline 效果: 默认,基线对齐
属性值: top 效果: 顶部对齐
属性值: middle 效果: 中部对齐
属性值: bottom 效果: 底部对齐

7光标类型

场景: 设置光标在元素上显示的样式
属性名: cursor
常见属性值: default 效果: 默认值,通常是箭头
常见属性值: pointer 效果: 小手效果,提示用户可以点击
常见属性值: text 效果: 工字型,提示用户可以选择文字
常见属性值: move 效果: 十字光标,提示用户可以移动

8编号圆角

画一个正圆:
1.盒子必须是正方型
2.设置边框圆角为盒子宽高一半—>border-radius:50%
胶囊按钮:
1.盒子要求是长方形
2.设置—>border-radius:盒子高度的一半

范例:

		.box {
            margin: 0 auto;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 一个值:表示4个角是相同的
                4个值:是从左上顺时针转一圈
            */
            border-radius: 50%;
            
        }
9溢出部分显示效果

属性名: overflow
常见属性值: visible 效果: 默认值,一处部分可见
常见属性值: hidden 效果: 溢出部分隐藏
常见属性值: scroll 效果: 无论是否一处,都显示滚动条
常见属性值: auto 效果: 根据是否溢出,自动显示或隐藏滚动条

10元素本身显示隐藏

展位隐藏:
visibility:hidden
不占位隐藏
display:none

精灵图

1精灵图的使用步骤

1.创建一个盒子,设置盒子的尺寸和小图尺寸相同
2.将精灵图设置为盒子的背景图片
3.修改背景图位置
通过PxCook测量小图片左上角坐标,分别取负值设置给盒子的background-position: x y
范例:

		span {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 背景图位置属性:改变背景图的位置 */
            /* 水平方向的位置  垂直方向的位置 */
            /* 想要往左移动图片,位置取负数 */
            background-position: 0 0;
            
        }
2背景图片大小

作用: 设置背景图的大小
语法: background-size: 宽度 高度;
取值: 数字+px 场景: 简单方便,常用
取值: 百分比 场景: 相当于盒子自身的宽高之比
取值: contain 场景: 包含,将背景图片等比例缩放,直到不会超出盒子的最大
取值: cover 场景: 覆盖,将背景图片等比例缩放,知道刚好填满整个盒子没有空白

3盒子阴影

作用: 给盒子添加阴影效果,吸引用户注意,体现页面的制作细节
属性名: box-shadow
取值:

参数: h-shadow 作用: 必须,水平偏移量。允许负值
参数: v-shadow 作用: 必须,垂直偏移量。允许负值
参数: blur 作用: 可选,模糊度
参数: spread 作用: 可选,阴影扩大
参数: color 作用: 可选,阴影颜色
参数: inset 作用: 可选,将阴影改为内部阴影
注意: 外阴影,不能添加outset,添加了会导致属性报错

4过渡

作用: 让元素的样式慢慢变化,长配合hover使用,增强网页交互体验
属性名: transition
常见取值:
参数: 过渡的属性 取值: all:所有能过渡的属性都过渡、具体属性名如width:只有width有过渡
过渡的时长 数字+s(秒)
注意点:
1.过渡需要:默认状态和hover状态样式不同,才能有过渡效果
2.transition属性给需要过渡的元素本身加
3.transition属性设置在不同状态中,效果不同
① 给默认状态设置,鼠标移入移出都有过渡效果
② 给hover状态设置,鼠标移入有过渡效果,移出没有过渡效果

CSS书写顺序:

1.浮动 / display
2.盒子模型相关属性
3.文字样式
优势:浏览器的执行效率高

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_细嗅蔷薇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值