Day09 学习CSS基础

学习CSS基础

导入方式（3种）

在html的头部用<style>标签写css样式，里面定义选择器定义不同的属性值

<!-- 内部样式 在html的head标签内写css样式-->
<style>
	/*一种选择器  选择所以h1标签 color颜色属性为red*/
	h1{  
		color:red;
	}
</style>
<!-- 外部样式 另一种将html和css分开写，进行外部引入  ../表示上级目录-->
<link rel="stylesheet" href="../css/style.css">
<!-- 行内样式 -->
<h1 style="color:yellow;">标题</h1>

哪种方式生效根据就近原则，先执行的会被后执行的覆盖

选择器

选择html页面上的某个或某类元素 进行样式修改

• 基本选择器：
• 优先级 id选择器 > 类选择器 > 标签选择器

1. 标签选择器 h1{…}
2. 类选择器 .类名{…}
3. id选择器 #id名称{…}

• 高级选择器

4. 层次选择器
   4.1 后代选择器 ： 某个元素的后面的所有元素：格式 #act p{…}
   4.2 自代选择器 ：某个元素的后面的一代：格式 #act>p{…}
   4.3 相邻兄弟选择器：同辈的，只有后面的一个有效 格式：#act + p{…}
   4.4 通用兄弟选择器：同辈的，后面所有同级的符合要求得 格式：#act~p{…}
5. 结构伪类选择器
   5.1 ul li:first-child{…} 表示： ul下的第一个li标签
   5.2 ul li:last-child{…} 表示： ul下的最后一个li标签
   5.3 ul li:nth-child(序号){…} ul下的第序号个标签，如果这个不是li标签则不起作用，这是按顺序的
   5.4 ul li:nth-of-type(序号){…} ul下的第序号个li标签,这是按类型的不存在不是li标签
6. 属性选择器
   6.1 例 a[属性名]{…} 选中所有a标签带有id属性的标签 a[id]{…}
   6.2 例 a[属性名=属性值]{…} 选中所有a标签带有class属性为item的标签 a[class=item]{…}
   属性值还可以用正则表达式
   *= 表示绝对等于 = 表示包含 ^= 以什么开头 $= 以什么结尾

CSS的基础样式

1. span 标签：重点要突出的字

2. 字体样式：
   - font-family:楷体; 字体
   - font-size：50px; 字体大小
   - font-weight: bold; 字体粗细

3. 文本样式：
   - color:red/rgba(0,255,0,0.1); 字体颜色，rgba()中的a表示透明度0-1之间
   - text-align:center/left/right; 排版：文本居中
   - text-indent:2em; 表示首行缩进2个字
   - line-height:30px; 行高 （行高和块的标签的高度一样则上下居中）
   - text-decoration:underline/line-through/overline/none; 下划线/中划线/上划线/取消下划线（a标签）
   - text-shadow:red 10px 10px 10px 阴影：阴影颜色，水平偏移 ，垂直偏移 ，偏移半径
   - 图片文字水平对齐：img,span{ vertical-align:middle }

4. 伪类
   - a:hover{…} 鼠标悬浮的状态

5. 其他：
   - ul li 的小圆点 ： list-style:none/circle/decimal; 去掉小圆点/空心圆/数字/
   - background: 背景，可以写背景颜色，背景图片，渐变色等等

盒子模型

盒子的图片： margin 外边距 border 边框 paddin 内边距

1. 边框 boder border: 3px solid red;
   - 边框的粗细
   - 边框的样式 dashed/solid/dotted…
   - 边框的颜色
2. 内外边距：
3. 圆角边框：
   - border-radius

浮动

1. 块级元素：独占一行：h1-h6 div p
2. 行内元素：不独占一行 a img strong span
3. 默认行内元素不能包含块级元素，块级元素可以包含行内元素
4. display属性: 改变行内元素和块元素
   - block 块元素
   - inline 行内元素
   - inline-block 可以写在一行的块元素
   - none 消失
5. float 左浮 右浮 ： 也可以使块元素显示在一行
6. 但是float 浮动会出现父级边框塌陷的问题： 可以看到父级边框并不能包含图片
   
   解决方式：1. 设置父级边框足够大
   2. 在父级边框内部最后添加一个空的div 设置属性为

.clear{
            clear: both;
            margin: 0;
            padding: 0;
        }

			  3. 父级边框的属性添加     overflow: hidden;
			  4. 在父级元素添加伪类，定义一些固定属性

 .box:after{
            content: "";
            display: block;
            clear: both;
        }

定位

position：

1. 相对定位： relative 相对于自己原来的位置进行偏移 top/bottom/left/right

2. 绝对定位(相对于初始位置)： absolute 如果父级元素没有定位则相对于浏览器定位，如果父级元素有定位则相对于父级元素进行定位，一般在父级元素元素写relative

3. 固定定位（相对于浏览器，可以随着滚动条变化随时固定）：fixed

4. z-index：层级 默认为0 （用于多层的，默认都在0层）

    	-