0414学习记录

1.css
层叠样式表
渲染html到网页
css存在样式表当中
外部样式表提高工作效率
多个样式可以层叠为一个

css作用是 给html标签写表现形式的

html标签分为几种类型：
按照是否换行来分：行级元素，块级元素
根据是否闭合来分：完全闭合，自闭合

css样式的写法规则：属性：值；
css里面的颜色值：
颜色值： 单词值 十六进制颜色值 #000000 rgb rgb(114,255,255) rgba(114,255,255,0.5)
网页里面的像素单位
px 代表固定像素值 相对屏幕的分辨率的单位值（一般用这个）
% 百分比像素值
rem 相对单位 只相对于 网页的html根元素的字体大小
em 相对单位 相对当前元素文本字体大小 没有设置字体时按照 默认浏览器默认字体大小

css里面设置宽高属性：当前元素必须是块级元素 如果要给行级元素设置宽和高 必须转化为块级元素（如何转换下期学习）

2.css 在网页里面分为几种类型：1.行内样式 2.内嵌样式3.外部样式

行内样式：
样式属性 有单属性样式 和 复合属性样式
行内样式写在元素style 属性上，写在元素的行内
color: red; 设置字体颜色的
font-size: 20px; 设置字体的大小 其他方法：larger x-larger small x-small （通常用px）
font-family: serif; 设置字体的样式，如宋体，黑体
width: 200px; 设置宽
height: 200px; 设置高

border-left-color:#000; 左边框的颜色
border-left-style:solid; 左边框的样式：实线
border-left-width:1px; 左边框大小
border-left:1px solid #000;合并写法

border：边框
border-right:右边框
border-bottom:底部边框

font-style:italic; 字体斜体
font-weight:bold; 字体加粗
font-size:30px; 字体大小
font-family:self; 字体样式
font:italic bold 30px self ; 合并写法

<div style="color:rgba(175, 198, 255, 0.58);font-family: fantasy;font-size: 20px;font:italic bold 30px self ;border-bottom:black solid 20px;">字体</div>

内嵌样式
css内嵌样式
内嵌的位置 ： 在head标签里面 或者内嵌到body里面
使用style标签内嵌到head或者body里面
通过css选择器来匹配样式

<div class="gannaldo">我是div1</div>
<div class="GannalDo">我是div3</div>
<p class="gannaldo">我是p标签</p>
<div id="gannaldo1">我是div2</div>
<div class="aaaa">
    <span>我是span标签</span>
</div>
<ul>
    <li>蔬菜
        <ol>
            <li>黄瓜</li>
            <li>菠菜</li>
            <li>土豆</li>
        </ol>
    </li>
    <li>水果
        <ol>
            <li>桃子</li>
            <li>西瓜</li>
            <li>橘子</li>
        </ol>
    </li>
</ul>

css选择器：
1.所有元素 ：*代表所有元素 匹配网页里面的所有元素*{border: 1px red solid;}
2.element 元素选择器 匹配网页里面所有的相同元素div{color:red;}
3.class 类名称 类选择器 class选择器使用点来匹配，class 可以多个元素共有 .gannaldo{color: red;font-size: 12px;
命名class id 的时候不要使用纯数字 数字不要开头 命名规则 可以驼峰命名 BlockSmall 帕斯卡命名 blockSmall

<div class="gannaldo">我是div1</div>
<div class="GannalDo">我是div3</div>

4.多个不同的元素具有相同的类名称eg如下p和div：根据元素区分，再选择类div.gannaldo{color: red;} p.gannaldo{color: red;}
5. ID选择器 ，使用#匹配，建议id只能有一个，不能同名#gannaldo1{color: red;font-size: 100px;}
6. 子父选择器.aaaa>span{color: red;}
空格，指的是匹配当前元素的所有后代元素 ul li{color: red;border-bottom:1px solid #000;}
大于号 ，匹配的是当前元素的直接子元素ul>li{color: red;border-bottom:1px solid #000;}
7.复合选择器 使用逗号分隔div.gannaldo,#id gannaldo{border-left: 1px solid red;}

外部样式
外部样式 在外部写样式，然后在网页内部引入 在外部新建一个css文件夹，然新建新建一个index.css文件，在文件内写样式，样式的写法和内嵌样式的几种写法一致

外部样式的引入
1.使用link 标签 可以引入在 head 或者body<link rel="stylesheet" href="css/index.css"/>
2.用style里面引入,使用@import ‘./css/index.css’ <style >@import "css/index.css";</style

样式优先级
三大样式： 行内 内嵌 外部
如果样式之间没有冲突：则样式显示的优先级是（样式叠加顺序）：
行内> 内嵌 > 外部 （内嵌样式在外部样式加载之后）
行内> 外部 >内嵌 （内嵌样式在外部样式加载之前）
如果样式之间存在冲突，样式优先级是（就近原则选取）：
行内> 内嵌 > 外部 （内嵌样式在外部样式加载之后）
行内> 外部 >内嵌 （内嵌样式在外部样式加载之前）

内嵌样式和外部样式也存在优先级（ 元素选择器之间的优先级）
内嵌样式选择器优先级:
id选择器>class类选择器>元素选择器>*选择器
button{border:1px solid black}> #name{border:1px solid green}> .button{border:1px solid blue}> *{border:1px solid red }
外部样式里面选择器的优先级和内嵌样式选择器优先级一致
子父元素选择器优先级 根据父元素的选择器来判断
这里注意 只看父元素选择器的优先级，子元素再高也没用
div#qaq>button{border:1px solid pink}> div.yyy>button{border:1px solid orange}