CSS笔记_有内部样式定义了 div>div{border: 1px solid red; }, 该样式将应用在-CSDN博客

本文链接：https://blog.csdn.net/qq_32705919/article/details/99128477

###CSS

美化页面的技术
Cascading 层叠 Style 样式 Sheet 表：层叠样式表，CSS用于美化html页面，html可以理解成盖房子，CSS相当于装修

###CSS的引入方式

内联样式：在标签内部通过 style属性添加样式，弊端：只能作用于一个元素，不能复用，几乎不使用

 <div style="color: red;border: 1px solid green;">我是一个div</div>
 <span style="color: purple;border: 1px solid pink">我是一个span</span>

内部样式：在head标签内部通过 style子标签添加样式，好处：可以在本页面内复用样式，弊端：不能多个页面复用同一样式，工作中此种方式用的不多，但是学习的时候使用内部样式，主要是方便演示
```
 <style type="text/css">
 	/* 标签名选择器 */
 	h3{
 		color: blue;
 		border: 2px solid yellow;
 	}
 </style>
```
外部样式：样式代码写在单独的*.css文件中，通过link标签引入到某个html页面中，好处：样式可以复用在多个页面中
```
 <link rel="stylesheet" href="demo01.css">
 css文件：
 @charset "UTF-8";

 p{
 	color: red;
 	background-color: green;
 }
```

###三种引入方式的优先级

如果三种引入方式作用的样式不同则全部生效
如果三种引入方式作用的样式相同则按照下面的优先级规则来决定到底哪个生效

内联优先级最高
内部和外部后执行会覆盖先执行的

###CSS的选择器
####基础选择器

标签名选择器

应用场景：当需要对页面中所有的某一种标签设置相同效果的时候
标签名{
样式名称:值;
样式名称:值;
}

id选择器

通过标签的id属性找到对应的标签
应用场景：当需要对页面中的某一个元素设置样式的时候使用
```
  #标签id{
  	样式名称:值;
  	样式名称:值;
  }
```

类选择器

通过标签的class属性找到对应的标签
应用场景：当需要对页面中的多个元素设置样式的时候使用
```
  .class{
  	样式名称:值;
  	样式名称:值;
  }
```

####其它各种选择器

属性选择器

通过标签内部指定属性查找对应的标签

  标签名[属性名="属性值"]{
  	样式名称:值;
  	样式名称:值;
  }

派生选择器(后代选择器)

通过多个标签之间的上下级关系查找子元素和孙子元素和。。。。所有后代元素
```
  基础选择器 基础选择器 基础选择器{
  	样式名称:值;
  	样式名称:值;
  }
```

子元素选择器

通过多个标签之间的上下级关系查找子元素。

  基础选择器>基础选择器>基础选择器{
  	样式名称:值;
  	样式名称:值;
  }

分组选择器

分组选择器可以把多种选择器通过逗号连接到一起，给多个选择器设置相同的样式
h3,p,.d1,#abc,#bcd{
color:red;
}

伪类选择器

用于选择元素的状态

visited：访问过的状态
link：未点击状态
hover：鼠标悬停状态
active：鼠标点击时的状态

使用方式：
/* 访问过的状态 /
a:visited {
color: red;
}
/ 未点击状态 /
a:link {
color: yellow;
}
/ 鼠标悬停状态 /
a:hover {
color: blue;
}
/ 鼠标点击时的状态 */
a:active {
color: pink;
}

任意元素选择器

如果需要给页面中所有的元素设置相同的样式可以使用此选择器
```
  *{
  	样式名称:值;
  	样式名称:值;
  }
```

####如果多个选择器设置相同样式的效果时，作用范围越小优先级越高

###CSS中常用的属性

已经接触的属性 color（字体颜色）background-color(背景颜色) border（边框）

元素的宽高：

块级元素的默认高度为内容高度，默认宽度为父元素的宽度
行内元素的默认宽高为内容的宽高

只能修改块级元素的宽高，不能修改行内元素的宽高
####设置元素的颜色

  /*1. 通过颜色名称赋值 red yellow green
   blue pink purple white black orange gray*/
  /*2. 6位16进制赋值 每两位表示一个颜色 红 绿 蓝   */
  /* background-color: #ff00ff; */
  /*3. 3位16进制赋值 每一位表示一个颜色  */
  /* background-color: #00f; */
  /*4. 通过3位 10进制赋值 每个取值0-255  */
  /* background-color:rgb(255,255,0); */
  /*5. 4位10进制赋值 第四位代表透明度取值0-1 */
  background-color: rgba(0,255,0,0.5);

####设置元素的背景图片

	/* 设置背景图片 */
	background-image: url("../imgs/a.jpg");
	/* 设置背景图片的大小 参数为宽和高  */ 
	background-size: 100px 100px;
	/* 设置背景图片不重复 */
	background-repeat: no-repeat;
	/* 设置背景图片的位置 left center right top bottom 
	第一个参数代表水平 第二个参数代表垂直*/
	/* background-position: right center; */
	/* 通过百分比控制位置 */
	background-position:90% 90%;

可以采用简化的方式，一起设置背景色及背景图，语法如下
background:背景色背景图平铺位置；
上述4个值可以酌情省略，但至少要保留背景色或背景图中的一个
固定背景图不变：background-attachment: fixed;

###盒子模型
####外边距

元素距离父元素或相邻兄弟元素的距离称为外边距

赋值方式：

  /* margin: 40px; 四个外边距都是40px */
  /* margin: 20px 50px; 上下20 左右50 */
  /* margin: 0 auto; 水平居中 */
  margin: 10px 30px 60px 90px;/* 顺时针 上右下左 */

块级元素：上下左右都生效
行内元素：只有左右生效上下不生效
外边距粘连问题：当元素的上边缘和父元素的上边缘重合的时候，子元素的上外边距会带着父元素一起移动，通过在父元素中添加 overflow:hidden;解决。
上下外边距取最大值，左右外边距相加
####边框
border: 粗细(像素值) 边框的样式(solid) 颜色
/* border: 10px inset purple; */
border-bottom:5px solid yellow;
border-left:5px solid pink;
border-top:5px solid green;
border-right:5px solid black;
border-radius:55px;/*圆角值越大越园 */
块级元素：上下左右边框全部生效，而且边框都会占显示区域
行内元素：上下左右边框全部生效，但是只有左右边框才会占显示区域，上下不占显示区域（不会增加元素自身的高度）

####内边距

内容距离边框的距离
给元素添加内边距会影响元素的宽高
移动元素内的子元素几种方式？两种：1. 给大的添加内边距（大的所占宽高会跟着改变） 2. 给小的添加外边距
移动元素内的文本的时候几种？一种：只能给大的添加内边距。
块级元素：内边距四个方向都生效，而且都会影响元素的显示范围
行内元素：内边距四个方向都生效，左右影响显示范围，上下不影响显示范围

####块级元素和行内元素关于盒子模型的总结

块级元素：可以设置宽高，外边距全部生效并且影响元素的所占宽高, 边框四个方向都生效，并且影响元素的所占宽高，内边距全部生效，并且影响元素所占的宽高
行内元素：不可以设置宽高，外边距左右生效，上下不生效，边框都生效，上下不影响所占高度，内边距都有效果，左右影响所占宽度上下不影响所占高度
###元素所占宽度计算公式
宽高为100*200 左外边距10 右外30 边框5px 左内8px 右内2px

100+10+30+5*2+8+2
左外边距+左边框+左内边距+元素宽度+右内边距+右边框+右外边距

###文本相关的属性

	/* 文本相关属性 */
	/* 文本水平对齐方式 center/left/right */
	text-align: center;
	/* 文本修饰  none 没有 
	underline 下划线
	overline 上划线
	line-through 删除线*/
	text-decoration: line-through;
	/* 文本颜色 */
	color: red;
	/* 行高  通常让文本垂直居中的时候使用行高 */ 
	line-height: 100px;
	/* 文本阴影   4个参数
	1. 阴影颜色 
	2和3是阴影的偏移值  
	4. 阴影的模糊度 值越小越清晰 0是不模糊*/
	text-shadow: #0f0 -15px 15px 1px;
   text-indent:2em 设置首行缩进

####字体相关属性

	/* 字体相关属性 */
	font-size: 20px;
	/* 字体粗细属性  normal 不加粗
		bold 加粗
		lighter 比普通细一些
	 */
	font-weight: lighter;
	/* 字体样式  可以设置多个值通过逗号分隔，以此检测
	哪个生效用哪个 */
	font-family: "楷体";
	/* 设置斜体 */
	font-style: italic;

###课程回顾：
####html

格式

head里面的内容

 <meta charset="UTF-8">
 <title>页面标题</title>
 <meta name="keywords" content="A,B">

文本标签

-
段落标签上下有空白区域
hr水平分割线 br 换行

列表标签

有序列表： ol li 属性：type(1,a,A,i,I) start起始值 reversed倒序
无序列表： ul li 属性：type

定义列表：

  <dl>
  	<dt>热菜</dt>
  	<dd>宫保鸡丁</dd>
  	<dd>木须肉</dd>
  </dl>

列表嵌套：有序和无序可以任意嵌套

分区元素

div：块级分区独占一行
span:行内分区共占一行
header article footer

标签分类

块级元素：独占一行， div h1-6 p hr
行内元素：共占一行， span i和em b和strong u s和del

图片标签
图片地图
超链接 a
```
 <a href="" target="_blank">
```

跳转

表格标签
表单
aaa

####CSS

css：层叠样式表，用来美化页面
css的引入方式：3种

内联：在标签的style属性里面写样式不能复用
内部：在head里面添加style标签写样式不能多页面复用
外部：在单独的css文件中写样式可以在多个页面中复用

引入方式的优先级：内联最高内部和外部：后执行的覆盖前面执行的
选择器

基础选择器：标签名{} #id{} .class{}
派生选择器：基础选择器A 基础选择器B{}
子元素选择器：基础选择器A>基础选择器B{}
属性选择器：标签名[属性名=“值”]{}
分组选择器：选择器A,选择器B{}
伪类选择器：未访问link 访问过visited 悬停hover 点击时active
任意元素选择器： *{}

常用属性

设置元素宽高： width、height
设置颜色5种：1. 颜色名 2. 6位16进制 3. 3位16进制 4. rgb 5. rgba
设置背景图片： background-image：url(“路径”) background-size:200px 300px;background-repeat:no-repeat; background-position:left/right/top/bottom/center 还可以通过百分比

盒子模型：

外边距：元素距离父元素或相邻兄弟元素的距离
margin-left/right/top/bottom:10px;
margin:10px
margin:10px 20px;
margin:0 auto;
margin:10px 20px 30px 40px 上右下左
边框：
border:1px solid red;
border-top/left/right/bottom:1px solid red;
内边距: 内容距边框的距离
padding 赋值方式和外边距一样
块级元素和行内元素关于盒子模型的区别

块级元素：可以设置宽高外边距四个边都生效边框都生效并且会影响元素所占范围内边距都生效并且会影响元素所占范围
行内元素：不可以设置宽高外边距：左右生效边框：都生效只有左右影响元素所占范围，内边距都生效只有左右会影响所占范围

文本相关：
水平对齐：text-align:left/right/center
文本修饰：text-decoration:under-line over-line line-through none
颜色color
行高：line-height：可以控制文本的垂直居中
text-shadow: 颜色 x y 模糊度（值越小越清晰）；
字体相关：
字体大小：font-size
文本粗细：font-weight
字体名称： font-family
字体样式：font-style：italic

###溢出设置

指子元素显示范围超出父元素范围时的设置

  /* visible(默认 超出显示)
  hidden: 超出不显示
  scroll:超出滚动显示  */
  overflow: hidden;

###元素显示方式
display:

block：块级元素默认的显示方式，独占一行，可以修改宽高
inline：行内元素的默认显示方式，共占一行，不可以修改宽高
inline-block:行内块，共占一行并且可以修改宽高

###元素的定位

####position定位
#####静态定位（文档流定位）（默认）
默认的定位：块元素垂直排列，行内元素左右排列
-这种默认的排列的方式称之为流定位
-流：元素有序排列而形成的队伍

元素如果是块级元素则默认从上到下排列，如果是行内元素则从左向右排列
设置方式： position:static;
#####相对定位
相对于元素初始的位置，通过left/right/top/bottom让元素做位置的偏移
设置方式：position:relative
元素不会脱离文档流
场景：当元素需要从当前位置做位置偏移的时候，并且不希望其它元素跟着移动时使用此定位
#####绝对定位
会脱离文档流后面有元素的话会顶上来
left/right/top/bottom 做位置偏移，相对于谁？ 1. 相对于窗口(没有祖宗或有祖宗但是没有做非static定位) 2. 相对于祖宗元素(有祖宗并且有某个祖宗做了非static定位，如果都做了，则就近原则)（如果仅仅是为了给子元素做位置的参考一般都使用relative）
场景：当元素需要相对于某个祖先元素或窗口做位置偏移的时候，并且不再占用原来的位置时使用此定位方式
#####固定定位
固定在窗口的某个位置，不会随着内容位置改变而改变
脱离文档流，left/right/top/bottom 坐标相对于窗口
####浮动定位
元素脱离文档流，元素在当前所在行内左侧或右侧浮动，当撞到父元素边框或浮起来的兄弟元素边缘的时候
如果所有浮动的元素一行装不下会自动换行，但是如果有凸出的元素会有卡住的效果
如果元素浮动则后面的元素会往上顶(因为浮动会脱离文档流)，如果不希望后面的元素往上移动，则需要在后面紧邻的元素上添加clear属性设置both/left/right,禁止元素两边/左/右有浮动的元素。
如果元素的所有子元素全部浮动，并且元素没有设置高度，此时自动识别的高度为0，可以通过添加 overflow:hidden; 让元素能够识别出浮动后子元素的高度
应用场景：当多个纵向排列的元素需要改成横向排列的时候使用浮动定位
练习： demo08.html 页面中添加一个无序列表把列表项改成横向排列
####行内元素的垂直对齐方式
默认对齐方式为基线对齐 vertical-align：baseline
top/middle/bottom