HTML-CSS

一、建CSS三种方法：
1 : 行内 样式 建在标签内 。
例

<div> style="color: green">衩头凤 唐婉    </div> 

2 : 内部样式 将CSS样式 ，建在 head 中

<style>       
p{ 
color : red;
font-size : 18px;
}
</style>

3: 外部样式(右击–新建Stylesheet) 将CSS样式 ，建在文件中

    div{
            width:300px;
            height:300px;
            background-color:blue;
            border:10px solid black;
    }

然后写在head 里面

 <link rel="stylesheet" href="文件名.css">

二、2017-12-22 冬至 晴

1. 找到标签(选择器)

①基本选择器:

1. 根据标签名去找标签(标签选择器)
2. ID选择器 (用#开头,用于给特定的标签设置样式)
3. class选择器 (用.开头, 用于大批量添加样式)
4. 标签.class名 (标签名和class名紧挨着,没有空格, 用于给带有class名的指定标签添加样式)
5. *所有标签(通常用于设置页面默认样式)

②层级选择器

1. 后代选择器(子子孙孙去找, 从所有后代元素中找符合要求的)
2. 儿子选择器(只从直接子元素(儿子标签)里找)
3. 毗邻选择器(label+input,找到紧挨着某个标签的标签, 往下找)
4. 弟弟选择器(往后找同级的标签)
5. 组合选择器(减少重复代码,把几个查找标签的条件用”,”分隔

③属性选择器

1. [egon]
2. [type=”button”]

④伪类选择器

1. hover ：鼠标经过时
2. visited : 已访问的
3. active ：点击时的
4. link ：未访问的

⑤CSS选择器优先级:

1. 继承优先级最低 (我如果没有设置自己的样式,默认我用祖先的样式)
2. 权重(

           1.不讲道理的!important /span { color: aqua!important; }/
           2.内联(写在标签里的style属性) 1000
           3.ID选择器 100
           4.class选择器 10
           5.标签选择器 1 例：div{ color: red;}
           6.继承的
        )
     3.重名的样式,后加载的覆盖先加载的

2. 设置标签的样式

①. color:#eeeee 颜色
②. background-color:grey 背景色
③. border 边框
④. padding:0 内填充

例：
.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

推荐使用简写：

.padding-test {
  padding: 5px 10px 15px 20px;
}

顺序：上右下左

补充：

提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；

⑤. margin:0 外边距

margin-right 等 
.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

推荐使用简写：
.margin-test {
  margin: 5px 10px 15px 20px;
}

顺序：上右下左

常见居中：
.mycenter {
  margin: 0 auto;
}

⑥.float：left 浮动

三种取值
left：向左浮动
right：向右浮动
none：默认值，不浮动

背景属性：

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top（20px 20px）;

支持简写：

background:#ffffff url('1.png') no-repeat right top;

使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。

不知道分类的还：

⑦.opacity 透明度
⑧.text-decoration : none (无样式)
text-decoration : underline 只有下划线
⑨.width:100% 屏幕多宽我多宽。
⑩.heigh:300px
①①.text-align:center 居中，字 随网页大小而居中。

特牛B的一个：margin: 0 auto; 上下0 左右自动（居中）

    jastify：两端对齐（会调整中间空隙）
    display
    white-space:nowrap;

3. 浏览器调试相关

① 查看HTML标签层级关系
② 查看CSS属性
③查看伪类属性(:hover)
④ 查看CSS BOX模型
看源码时，发现样式被划掉，那是因为 被优先级更高的样式覆盖掉了
看源码时，要想保存图片 右击 --> Open in new tab

---

小传奇 – Mr.