细说CSS入门学习

CSS 层叠式样式表

1. css含义: Cascading Style Sheets

2. 作用: 定义HTML 元素如何去显示

   ​ 1996年设计出来.

   ​ 1996 年 css1.0

   ​ 1998年 css2.0

   ​ 2001年 css3.0

   ​ 目前最新版本是css3.0

   ​ W3C与2011年9月29人开始了设计css4

3. CSS特点:

• 样式和内容相分离.

• 提高页面浏览速度.(采用cs 的页面容量小)

• 外部样式表可以极大提高工作效率,易于维护和改版.

  <style type="text/css"> </style>
  
  
  
  

一. css基本语法

一.基本语法

• css规则由 选择器 和 声明 两部分组成,
  • 选择器 用于指定 要修改样式的元素
  • 声明 用于定义 元素样式
• 声明部分可以由 属性:属性值; 的形式组成
• 可以由一条或者多条声明组成, 每条声明之间必须使用分号隔开.
• css **不区分大小写,**建议小写 ( id / class 区分大小写)
• 选择器和声明 一起使用时, 需要将声明部分 用 { } 包裹
• 只有一条声明 或 多条声明的最后一条, 可以省略分号,( 但不推荐 )
• 建议每条声明都独占一行,提高可读性,也利于排错

二.长度单位

属性	功能
px	像素
em	倍数
%	百分号
cm/mm	厘米 毫米
pt	点, 印刷单位

三.颜色单位

1. 英文: red green blue orange pink 等等…

2. 十六进制表示 65535种

   1. 0-9,a-f
   2. #rrggbb => #ff33cc -> #f3c
   3. 白色 #ffffff
   4. 黑色 #000000

3. RGB形式

   • rgb(0,0,0) 0~255 或者 %
   • rgb(255,0,0)
   • rgba(255,0,0, 0.5) 0~1 小数 表示透明度

二. css导入方式

1. 外链式 正规写法

   在head头部标签中,通过 link 标签来导入css文件

   例: < link rel=“stylesheet” href=“css.文件”>
   
   

2. 内联式 测试写法

   在head头标签中, 通过style标签当场写 css
   <style> css代码 </style>
   
   

3. 内嵌式 独留(毒瘤)写法

   在开始标签中, 通过style属性 直接css

   <开始标签 style="css代码">
   
   

4. 导入式 过期写法

   在head头标签中通过style标签来导入css

   <style>
   		@import url(css文件地址)
   </style>
   

导入式 和外链式的 区别

• 外链式: 先加载css 在加载html

• 导入式: 先加载html 在加载css

注意点: 四大通用HTML属性

属性名	功能
name	给标签取名
style	给标签赋予css样式
class	给标签取个绰号(可重复,可多个)
id	给标签取个身份证(唯一性)

三.选择器

(一) .基础选择器

1.标签选择器

​ 格式: 标签名{ … }

​ 注意: 匹配的范围非常广,适合做初始化

2.类选择器

​ 格式: .class名{ … }

​ 注意:

• 一个标签可以有多个class名
• 多个标签 可以有相同的class名
  
  

3.身份选择器

​ 格式: #id名{ … }

​ 注意: 实际测试,多个标签可以有相同的id名

​ 但是如果多个标签由相同的id名,在未来的js中会报错,尽量不要重复id.

注意点: class 和 id 严格区分大小写

(二) . 关联选择器

定义: 关联选择器 / 关系选择器
(s1 和 s2 代表 基础选择器)

s1 s2{…} 匹配s1里面的所有后辈s2
s1 > s2{…} 匹配s1里面的所有儿子s2
s1 + s2{…} 匹配s1后面的一个兄弟s2
s1 ~ s2{…} 匹配s1后面的所有兄弟s2

​

(三). 组合选择器

使用 逗号 链接 基础选择器 赋予属性

例: .xx , .xx , #xx , p { … }

(四) . 伪类选择器

1.s1:hover{ … } 当鼠标悬停在s1上时,触发css

技巧使用: 伪类选择器配合关联选择器
s1:hover s2{…}
s1:hover > s2{…}
s1:hover + s2{…}
s1:hover ~ s2{…}

2 s1:focus { … }
当s1 获取到光标时,触发css

3.按顺序查找标签

s1: first-child{…}

匹配s1父级里面的第一个儿子s1

详细分析:

​ 第一步: 找到s1父级

​ 第二步:找父级里面的第一个标签

​ 第三步:看第一个标签是不是s1,如果不是就不执行


4.在标签中安顺序查找

s1:first-of-type{…}

匹配s1父级里面的第一个元素


详细分析:

​ 第一步: 先找到s1父级

​ 第二步: 找到父级里面的所有的s1

​ 第三步: 找s1中的第一个


5.
s1:last-child{…} 匹配s1父级里面最后一个儿子s1

s1:last-of-type{…} 匹配s1父级里s1中的最后一个元素

s1:nth-child(n){…} 匹配s1父级里面的第n个儿子s1

s1:nth-of-type(n){…} 匹配s1父级里面s1中的第n个元素

N 的写法:

​ 数字

​ 单词 odd奇数 even偶数

​ 公式: 2n,3n,3n+1,2n+1,3n+5等 一元一次方程

(五). 伪对象选择器

1. s1::before{…} 在s1里面的子元素的最前面

2. s1::after{…} 在s1里面的子元素的最后面

   注意点: before和after 都会配合content属性
   ​ 使用场景: 在将来的浮动技术经常用到

(六). 优先级

1. 权重值相同, 谁距离标签近,谁的优先级越高

2. 权重值不同,谁权重值大,谁的优先级高

3. 权重值 可以叠加 （z-index: 10; 设置权重）

   ​ 标签权重值: 1

   ​ class权重值:10

   ​ id 权重值 : 100

   最高权重: ! important ( 注意这个是写在属性值后面的)

(七)继承性

1. 大部分属性可以继承父级

2. 小部分是无法继承父级的属性

   例如: a标签的颜色, h标签的大小等

   3.如何查看是否继承,通过浏览器f12 观察css中 Inheritedfrom

四,字体属性

属性名	功能
font-size	字体大小
font-family	字体家族
font-weight :bold	字体加粗
font-style :italic	字体风格倾斜
font- height	行高,一般在垂直居中时,仅限于一行文字

简写: font: weight style size/line-height family
简写时: size 和 family是必须写的,其他都可以省略.

五. 背景

<background>

属性名	功能
background-color	背景颜色
background-image url(图片地址)	背景图片
background-repeat	背景重复 no-repeat 取消重复
background-position	背景定位 x y +向右向下, -向左向上
background-size	背景大小
background-attachment	背景固定 fixed

简写: background: color image repeat position/size attachment

以上简写属性值: 可以互相颠倒,可以省略

六. 边框

<border>

边框基本属性: 1.color 2. width 3. style

边框基本属性: left —right—top—bottom

注意:

边框的style是必须写的,color和width有默认值,边框的三个属性的书写顺序可以随意颠倒.

功能	标签名
单边:	border-方向-属性
单边简写	border-方向: color width style
四边	border-属性
四边	border: color width style
圆角	border-上下-左右-redius: px 或 %
圆角简写	border-radius: px 或 %
边框合并	border-collapse : collapse
轮廓	outline 格式与 border一模一样 常用于none 设置无轮廓 outline=none;

注:: border-radius: 100% 将边框设置成一个圆

​ border-collapse: collapse 将边框合并

​ outline: none ; 设置轮廓属性无

​

七. 阴影

<boxshadow>

盒子阴影: box-shadow: 1px 2px 3px 4px #C0C0C0

box-shadow 中的属性值	意义
1px	水平位移 (可负数)
2px	垂直位移 (可负数)
3px	模糊度 (不能为负)
4px	阴影面积 (可以省略 不能为负)
#C0C0C0	阴影颜色

八. 溢出

<overflow>

overflow: 的属性值	含义
hidden	隐藏溢出的内容
visible	显示溢出的内容 (默认)
auto	通过滚动条显示溢出的内容
overflow-x:	hidden–visible–auto
overflow-y:	hidden–visible–auto

九. 文本

<text>

属性名	功能
display: table-cell	将当前元素转为td 单元格
text-indent	首行缩进 单位:2em
text-align	水平对齐 left- center-right
text-decoration	文本划线
text-overflow	ellipsis将溢出的隐藏内容用…代替(仅限一行)③
	配合white-space:nowrap;(强制在一行显示内容)①
	overflow:hidden; ( 超出容器部分隐藏)②
垂直对齐方式	只有一行需要设置垂直居中,可以通过line-height,还可以通过vertilcal-align来操作
	注意: vertilca-align 默认是对外对齐, 不是对内,若对内对齐需要配合 display: table-cell (将当前元素转为td单元格)
	vertical-align: top–middle–buttom 垂直对齐–( 比如垂直对齐与之前的元素 )

十. 平滑过渡

<transition>

简写: transition : 属性 变换时间 变换速度 延迟时间 ;

注意点: 顺序不能颠倒, 顺序支持有数值变化的属性,例如:width,height, color…

属性名:	功能
transition-property	改变某个属性
transition-duration	需要多少时间来改变属性 单位s/ms
transition-timing-function	变换的速度
linear	匀速
ease-in	加速
ease-out	减速
ease-in-out	先加速 在减速
	自定义~~~~~~
transition-delay	延迟时间

十一. 变形

<transform>

transform: 属性名	功能
none	不变形
rotate	旋转 单位: deg角度
skew	扭曲 单位: deg角度----90的奇数倍,都会扭成一条线
scale	中心缩放 单位: num数字----1代表本身----->1 放大—<1 缩小
translate	位移 单位: px

十二 . 列表

list-style: none 取消项目符号 取消列表格式

十三. 鼠标样式

cursor

属性 cursor	含义
pointer	手掌
text	默认箭头
move	移动,坐标
wait	等待
none	隐藏鼠标

十四.字体图标

阿里字体图标文件

1.导入css文件

通过link 导入图标文件

例: <link rel="stylesheet" href="./inconfont/iconfont.css">


2.给需要用字体的标签价class=iconfont即可

地址: http:www.icofont.cn/


3.自定义图标

​ @font-face{

​ font-family:‘自定义字体家族名’;

​ src: url(‘字体文件地址’);

​ }

css代码 效果没出现时: F12查看css

1.css代码并没有找到,此时你的选择器 可能没有选择

2.css代码没有找到,但是被杠掉了,此时你的css代码优先级可能比较低

盒子模型:

盒子常指向div 在不同浏览器中盒子的组成有所区别

IE浏览器: 内容覆盖内边距和边框 (外边距)

非IE浏览器: 内容+ 内边距+ 边框 (外边距)

详情查看: 可以通过 浏览器 F12

十五. 行块元素

在HTML中,本质只有两个标签: 行级元素 和 块级元素.

1. 行级元素
   1. span,a,b,i,del,img…
   2. 不会独占一行
   3. 宽高 根据内容变化而变化
   4. 行高 水平内外边距 可以手动调整
   5. 容纳性: 只能容纳行级元素
      
      
      
2. 块级元素
   1. div , p,h1~h6…
   2. 总是独占一行
   3. 宽度 默认与浏览器一致
   4. 高度 默认与内容一致
   5. 宽,高,行高,水平垂直,内外边距,都可以手动控制
   6. 容纳性:任何元素

十六. 内外边距 margin-padding

1. 外边距-margin

边框与外部元素之间的距离

margin: 10px 上下左右均10

margin: 10px 20px 上下10 左右20

margin: 10px 20px 30px 上10 左右20 下30

margin:10px 20px 30px 40px 上10 左20 下30 右40

单边外边距: margin - 方向

小技巧: 在父级元素里面水平居中

​ margin-left : auto;

​ margin-right : auto;

2. 内边距-padding

边框与内容之间的距离

padding: 10px 上下左右均10

padding: 10px 20px 上下10 左右20

padding: 10px 20px 30px 上10 左右20 下30

padding:10px 20px 30px 40px 上10 左20 下30 右40

单边内边距 : padding - 方向

十七. 定位 (position)

想要学好定位 ,先了解一下流 这个概念

流:

普通文档流: 当时在body书写的标签都默认属于文档流

定位流: 通过position将元素 脱离文档流…

任意一个定位,都会脱离文档流

position 定位方式	属性	位置
absolute绝对定位	left-right-top-bottom	不会保留原来位置,基于第一页四个角落
relative相对定位	left-right-top-bottom	保留原来位置,基于原来位置的四个角落
fixed固定定位	left-right-top-bottom	不保留原来位置,基于当前可视窗口的四个角落

**定位技巧:**

​ 父级元素使用: 相对定位

​ 子级元素使用: 绝对定位

注意: 祖辈可以做任意定位,但是为了保护原有界面美观,不让后面的兄弟元素向上, 所以采用相对定位,保留原来位置.

十八. 定位优先级 z-index

当多个元素定位重叠时: 怎么区分?

​ 使用: z-index: num数字

​ num数字越大, 优先级越高.

必须配合定位才能使用的属性.

十九. 浮动 float

1. 浮动技术 主要是针对 块元素.

2. 作用: 将块元素以横排方式排列

3. 注意点: 不会保留原来的位置

4. 浮动

   float: left | right | none

5. 清除浮动

   cleat: left | right | both
   
   
   

清除浮动的技巧 1: 原理

​ 在浮动元素的最后面,加上兄弟元素(空标签)

,并赋予clear属性,从而清除前面的浮动.

清除浮动的技巧 2: BFC

​ 在浮动元素的父级,通过overflow:hidden,形成BFC区域,从而清除自己的浮动,BFC区域一旦形成,将不会影响到外界的元素


清除浮动的技巧 3: 推荐

​ 在浮动元素的父级,通过以下代码清除自己的浮动

​ 父级::after{

​ conternt: ’ ';

​ display:block; 将当前元素转为块元素

​ clear: both;

​ }

二十. 元素转换 display

display可以转换的 属性	功能
block	块级元素
inline	行级元素
inline-block	内联-块元素
none	隐藏当前元素
table	块级表格
table-cell	块级td单元格
flex	参考百度flex布局

visibility 可以转换的属性	功能
hidden	隐藏当前元素 (隐藏 , 占位)
visible	显示当前元素

二十一. css初始化

原因: 各大浏览器默认值都不相同,导致同样的代码,在不同浏览器中显示的效果会有差异.

解决方案: 自己别写css 统一各个浏览器默认值

必须初始化的一些
body{ 字体大小  背景颜色  字体家族  等等}
body,ul,ol,h1~h6{margin:0 padding:0}
li{list-style:none}
a{text-decoration:none}
a:hover{text-decoration: underline;}

二十二. 网页布局.

1. div + css
2. FLEX弹性盒子布局
3. 响应式布局
4. …

DIV + Css

​ 先看行, 在看列

​ 从上往下依次布局

​ 先写大的, 在写小的