CSS基础

CSS

层叠样式表(Cascading Style Sheets): 就是给HTML标签添加样式的, 让它变得更好看

注释

 /*单行注释*/
    /*
    多行注释1
    多行注释2    
    */

CSS的语法结构

选择器 {
        属性1: 值1;
        属性2: 值2;
        属性3: 值3;
    }

CSS的三种引入方式

    1 内部样式表
		写在 head 中 style 标签下
    2 link标签引入外部CSS文件(最正规的方式, 解耦合)
		<link rel="stylesheet" href="22_bolg.css">
    3 行内式(一般不用)
		<div id="d1"style="color: gray"></div>

选择器

1 基本选择器

<style>
    #d1 {   /* id 选择器 */
        color: greenyellow;
    }
    .c2 {   /* 类选择器 */
        color: red ;
    }
    span {  /* 标签选择器 */
        color: blue;
    }
    *   {   /* 通用选择器 */
        color: yellow;
    }
</style>

2 组合选择器:

/*将标签的嵌套关系比喻成了亲戚关系*/
    后代选择器   (只要是div 内部的 span 都能拿到)
        div span {}
    儿子选择器   (只拿内部 第一层级的 span)
        div>span {}
    毗邻选择器   (紧挨着我的同级的下一个span)
        div+span {}
    弟弟选择器   (同级别下面所有的span 
        div~span {}

2.5 分组与嵌套

```css
多个选择器可以并列共用一套css样式
        div, p, span {}
    不同的选择器之间可以混合使用
        d1, .c1>span {}
```

3 属性选择器

/*
1 含有某个属性
2 含有某个属性并且含有某个值
3 含有某个属性并且含有某个值的某个标签
属性选择器是以 [] 作为标志的  
*/
# 找到所有 带有username属性的标签
[username] {    
    background-color: red;
}
# 找打所有带有username属性且属性值为 zhaoliu 的标签
[username=zhaoliu ] {
    background-color: blue;
}
# 找到所有input 标签 且 标签内有username属性 且属性值为 lisi 的标签
input[username="lisi"]{
    background-color: green;
}

ps: 标签既可以有默认的属性
        还可以自定义书写一个或多个属性

4 伪类选择器

  a:link {}
  a:hover {}  # 需要记忆 鼠标移到目标位置
  a:active {} 
  a:visited {}	# 点击过
  input:focus {} input 框获得焦点

5 伪元素选择器

 p: first_letter {} 通过css加文本内容 但是无法选中
 p: before {}
 p: after {}

ps: before 和 after 多用来清除浮动带来的负面影响
    .clearfix:after

6 CSS3 高级选择器

 	:first-child   第一个儿子标签
	:last-child    最后一个儿子标签
	:nth-child(n)  第n个 

选择器优先级

选择器相同 就近原则

行内 > id > class > 标签
行内 > 内部样式表 > 外部样式表
ps: !important 强制让标签采用你的样式  但是不推荐使用

属性

宽和高

width
height

块级标签的宽度不修改的情况下 默认占浏览器的一整行
块级标签的高度也是取决于内部的文本的高度
行内标签宽度和高度都是由内部文本决定的 行内标签是无法设置长宽的

字体属性

1 字体样式 
    font-family
2 字体大小
    font-size
3 字重
    font-weight
4 字体颜色
    color: dodgerblue;  /*直接写颜色英文*/
    color: #213212;     /*颜色编号*/
    color: rgb(123, 45, 13);    /*三基色 数字*/
    color: rgba(131, 121, 123, 0.5);    /*三基色 + 透明度 范围 0-1*/

文字属性

1 文字对齐
    text-align
        center left right
2 文字装饰  
    text-deoration      # 主要用来给 a 标签去掉自带的下划线
		none   		# 去除下划线     
		underline 	# 增加下划线
3 首行缩进
    text-indent  默认为文字大小的两倍
4 文本阴影
	text-shadow 3px 3px 3px rgb(0,0,0)
				x	y  模糊度	颜色
	与盒子阴影类似

鼠标形状属性

	cursor
		default 默认光标
		pointer 超链接指针  ****
		wait    等待
		help    帮助
		text    文本
		crosshair 十字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Dr0aNTQ-1640439030620)(C:\Users\BabyMuu\Downloads\uTools_1639881436971.png)]

背景属性

1 背景色
    background-color
2 背景图片
    background-color: brown;
    background-image: url('myfile.bmp'); /*默认全部铺满*/
    background-repeat: no-repeat ;  /*不平铺 默认为 repeat 全部铺满*/
    background-repeat: repeat-x;  /*x轴平铺*/
    background-repeat: repeat-y;  /*y轴平铺*/
3 宽和高
	background-size: 100% 100% 
ps_1: 在多个属性名前缀都是相同的情况下 一般都支持简写: 只写前缀
	background: red url('') no-repeat center

Extra: 雪碧图(一个包含多个图标的图片)
	可以根据图片内的图标的最左上角的位置找到该图标(x: 距离左上角的长度,y:距离左上角的高度)
	width: 图标宽度(单位px)
	height: 图标高度(单位px)
	background: red url('....') no-repeat -x -y 
	# 优点: 
		提升性能, 代码优化, 减少向服务器的请求次数
	# 原理:	
		将小图标放到一张大图中, 这样就可以想服务器请求一次, 然后如果后序需要使用某个图标, 就可以从先前请求到的那个图片中去定位找小图标
		
ps_2: 在调样式的时候 可以借助于浏览器快速的微调, 然后将调整好的参数修改到 css 样式中

边框

border-width: 400px
border-style: bolder
border-color: red
border-radius:50%  曲度 ==> 圆角
简写: 将相同的前缀属性值 写在一起 属性只写前缀
border: 400px bolder red

display 属性

/* 能够让标签具有自身没有的属性和特征 */
dispaly
    none 隐藏 并且让出自身的位置
    inline 行内
    block  块级
    inline-block  可以编辑长高
ps visibility:hidden 只隐藏 不让出自己的位置

溢出属性

/* 标签内部的内容超出了标签自身的范围会造成内容的溢出 */

overflow: 
	hidden 文本超出时隐藏
	scroll 滚动条
	auto 自动模式
	visible(默认)
eg: 新闻:
    news a {
		white-space:nowrap 不允许换行
         overflow: hidden   盒子内容超出时隐藏
         text-overflow: ellipsis 以省略号结尾(超出时)
    }
eg: 19_溢出之实用场景.html (头像框) 
    overflow:hidden
    img {
        max-width:100%
    }

盒子模型

/* 解释:
	以快递盒为例  
        快递盒与快递盒之间的距离(标签与标签的距离 margin 外边距)
        盒子的厚度   (标签的边框 broder)
        盒子里面的物体到盒子的距离 (内容到边框的距离 padding 内边距)
        物体的大小(内容 content)
*/
1 外边距       margin
2 内边距       border
3 边框         padding
4 内容         content
/* body 标签默认自带 8px 的 margin */
box-shadow: 盒子阴影    
    5px 5px 5px rgba(0,0,0,0.5);
	x	y  模糊度   颜色		
	偏移量			
margin参数信息
    margin:0; /* 上下左右都是 0*/
    margin:10px 20px; /*1 上下 2 左右*/
    margin:10px 20px 30px; /*1 上 2 左右 3 下*/
    margin:10px 20px 30px 40px; /*上 右 下 左*/

padding参数与 margin 相同
/*
    如果想要调整标签与标签之间的距离 就可以调整 margin
    body标签默认有 8px 的margin
*/

浮动 float

只要是前期页面布局 一半都是用浮动来设计页面
能够让标签头里正常的文档流 漂浮到控制 (距离用户更近)

浮动的元素没有块级和行内一说, 标签多大 浮动起来就占多大

清除浮动带来的影响

浮动的元素会造成父标签的塌陷
	塌陷：当元素设置浮动而父元素的宽高没有设置时，高度会塌缩为0
解决塌陷的推导步骤
    1 自己添加一个 div 标签 设置高度从而强行撑起一个高度
    2 利用clear 属性
        #d4 {
                clear:left;
            }
	   clear:left right both
    3 通用的解决浮动带来影响的方法(全球统一的解决方式)
        在写 html 页面之前 先写好处理浮动带来的影响的 css 代码
            .clearfix:after { /*伪类选择器*/
                content: ""; /*必备*/
                display: block; /*设置为块级元素, 原本应为行内元素*/
                clear: both; /*左右都清除浮动的影响*/
            }
        之后只要标签出现了塌陷的问题就给改标签加一个 clearfix 属性即可
        上述的解决方式是通用的 到哪里都一样 名称都是 clearfix
    

定位

静态定位(默认) static

默认所有的标签都是静态的 无法改变位置

相对定位 relative

相对于标签自身原来的位置
    如果将标签的属性 position 由 static 变成 relative 
        标签就会由没有定位的标签编程已经定位的标签 
    性质会改变

绝对定位 absolute

eg: 小米购物车
相对于已经定位过的父标签(如果没有 则以body作为参照)

固定定位 fixed

eg: 回到顶部, 右侧/左侧 小广告
固定在浏览器的某个位置
相对于浏览器窗口定位

浮动,定位是否脱离文档流

1 脱离文档流
    1 浮动
    2 固定定位
    3 绝对定位
2 不脱离文档流
    1 相对定位

参数

left
right
top
bottom

z-index 模态框

其实用来调节指向人的z轴的距离
eg: 百度登录页面 三层结构
    1 最底部 正常页面内容
    2 黑色的蒙板
    3 最顶层 白色的登录页面

透明度 opacity

rgba 只能影响背景颜色

opacity 可以修改背景颜色和字体颜色

总结: 它不单单可以修改背景色的透明度 而且可以修改字体的透明度

示例

<!DOCTYPE html>
<html lang="en">
<!--
eg: 百度登录页面 其实是三层结构
    1 最底部是正常页面(z = 0)   最远的
    2 黑色的透明区 (z = 99)       中间层
    3 白色的注册区域 (z = 100) 离用户最近
-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .cover {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 8;
        }

        .modal {
            background-color: white;
            height: 200px;
            width: 300px;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 100;
            margin-left: -150px;
            margin-top: -100px;
        }

        #b1 {
            position: relative;
            left: 30%;
        }
    </style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
    <h1>login page</h1>
    <label>
        <span>username <input type="text"></span>
        <span>password <input type="password"></span>
    </label>
    <button id="b1">click me to login</button>
</div>
</body>
</html>

简易博客总结

先用 div 划定区域
在用 HTML 先占位
最后调节样式
    1 在给标签 起 ID 或者 class 属性的时候 也应该做到简明之一

css 单独开设文件来写
    1 上来先用注释表明用途 以及作用区域
        /*这是一个博客园首页的样式文件*/

    /*通用样式*/
        body {
            margin:0;
        }
        a {
            text-decoration:none;
        }
        ul {
            list-style-type:none;
            padding-left:0;
        }
    /*左侧样式*/

    /*右侧样式*/