web day04

回顾

1. CSS层叠样式表 用于美化页面
2. 引入方式

• 内联:在标签里面添加style属性,弊端:不能复用
• 内部:在head标签里面添加style标签 通过选择器添加样式 好处可以当前页面复用,弊端:不能多页面复用
• 外部:在单独css文件中写样式代码 在html页面中通过link标签引入css文件,支持多页面复用
• 引入方式的优先级:内联最高,内部外部一样 后执行覆盖先执行

3. 选择器

• 标签名 div{}
• id选择器 #id{}
• class .class{}
• 属性 标签名[属性名=‘值’]
• 分组 div,#id{}
• 子孙后代 div span{}
• 子元素 div>span{}
• 伪类 未访问link 访问过visited 悬停hover 点击active
• 任意元素 *{}

4. 颜色赋值

• 通过颜色单词 red
• 6位16进制 #ff0000
• 3位16进制 #f00
• 3位10进制 rgb(255,0,0)
• 4位10进制 rgba(255,0,0,0-1)

5. 背景图片

• background-image:url(); 设置背景图片
• background-size:100px 200px; 设置尺寸
• background-repeat:no-repeat; 禁止重复
• background-position: left/right/top/bottom/center 百分比

6. 盒子模型= 外边距+边框+内边距+宽高

• 宽高:width/height 1.像素 2.上级元素的百分比
  行内元素不能修改宽高 由内容决定
• 外边距:元素距上级元素或相邻兄弟元素的距离
  margin-left/right/top/bottom:10px;
  margin:10px; 所有 4 个外边距都是 10px
  margin:10px 20px; 上下10px 和左右20px
  margin:0 auto; 居中
  margin:10px 20px 30px 40px 上右下左
  行内元素上下外边距无效
  上下相邻取最大 左右相邻相加
  粘连问题:当元素的上边缘和上级元素的上边缘重叠时,通过给上级元素添加overflow:hidden解决

盒子模型之边框

• 单个方向添加边框:
  border-left/right/top/bottom: 粗细 样式 颜色;
• 四个方向添加边框
  border:粗细 样式 颜色; //边框在所在区域的外面
• 行内元素边框不影响元素所占高度
• 圆角:
  border-radius: 值越大越圆 超过宽高一半时变成圆形(前提宽高一样)

div{
		width: 200px;
		height: 100px;
		/* 粗细 样式 颜色 */
		border: 20px solid red;  
		/* border-left: 1px solid red;
		border-right: 5px solid blue;
		border-bottom: 2px solid green; */
		/* 圆角  值越大越圆 当值为宽高一半时变圆形*/ 
		/* border-radius: 51px; */
		background-color: green;
	}

border: 0; /* 去掉文本框自带边框 */

盒子模型之内边距

• 什么是内边距: 元素边框距内容的距离
• 如果需要移动元素的文本内容则必须使用内边距,如果需要移动元素的子元素内容可以使用两种方式1. 给子元素添加外边距 2.给元素添加内边距(会影响元素的宽高)
• 行内元素内边距不影响元素所占高度

盒子模型回顾

• 盒子模型由:外边距+边框+内边距+宽高
• 一个元素所占的宽度如何计算
  公式: 左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距

1. 宽高: width/height 像素和百分比
   行内元素不能修改宽高 由内容决定
2. 外边距: 元素距上级元素或相邻兄弟元素的距离
   行内元素上下外边距无效
   左右相邻相加 上下相邻取最大
   粘连问题: overflow:hidden
3. 边框: border-left/right/top/bottom:粗细 样式 颜色
   行内元素不影响元素所占的高度
4. 内边距: 元素边框距内容的距离 赋值方式和外边距一样
   行内元素不影响元素所占的高度

文本相关样式

1. 水平对齐方式
   text-align:left/right/center
2. 文本修饰
   text-decoration:overline/underline/line-through/none
3. 文本阴影
   text-shadow:颜色 x偏移值 y偏移值 浓度(值越小越清晰)
4. 行高
   line-height: 像素
5. 文本颜色
   color:red;

<style type="text/css">
	div{
		border: 1px solid red;
		width: 200px;
		height: 50px;
		/* 文本水平对齐方式 */
		text-align: center;
		/* 文本修饰  上划线overline 
		下划线underline 删除线 line-through*/
		text-decoration: line-through;
		/* 文本阴影 颜色 x偏移 y偏移 浓度(值越小越清晰)*/
		text-shadow: green -5px -5px 2px; 
		/* 行高  可以实现文本的垂直居中 */ 
		line-height: 50px;   //文本上下的高度与height一样就居中
		/* 文本颜色 */
		color: red;
	}
	a{
	/* 去掉超链接的下划线 */
		text-decoration: none;
	}
</style>

字体相关

1. 字体大小 font-size
2. 字体加粗 font-weight:bold/normal(去掉加粗效果)
3. 斜体 font-style:italic
4. 字体设置 font-family: xxx,xxx,xxx;

CSS的三大特性

1. 继承性: 元素可以继承上级元素的部分样式(包括文本相关和字体相关) ,个别标签自带效果不受继承影响,如:h1-h6自带字体大小不受影响,超链接a标签自带字体颜色也不受继承影响.
2. 层叠性: 不同的选择器有可能作用到相同某一个元素,如果作用的样式不同则全部生效(层叠到一起全部生效),如果作用的样式相同则由优先级来决定
3. 优先级: 作用范围越小优先级越高 id>class>标签名>继承 , 直接选中优先级高于间接选中(继承属于间接选中)

溢出设置overflow

• hidden 隐藏
• visible 显示
• scroll 滚动显示

显示方式display

• block: 块级元素的默认值,独占一行,可以修改宽高
• inline: 行内元素的默认值,共占一行,但是不能修改宽高
• inline-block:行内块, 共占一行并且可以修改宽高