前端基础-CSS

一、CSS选择器

css（层叠样式表）。什么是选择器？选择器就是可以选择网页（html文件）任何标签或文本。然后去修改选定的标签样式。选择器分为多种类型，而且具有优先级。优先级由大到小,以p标签为例。

（1）内联选择器

就是在代码内部直接写。

 <p style="color: red;">段落</p>
  <p style="color: red;background-color: aqua;">段落</p>

（2）内部选择器

内部选择器又可分为id、类选择器。
结构：#id属性值
作用：找到页面中带有该id属性值的标签，设置样式。
特点：
1、id属性值相当于是身份证号码，在一个页面中是唯一的，不可重复的！！！
2、一个标签上只能有一个id属性值。
3、一个id选择器只能选中一个标签。一对一。
代码：

 #p1{
     color: brown;
     text-align: center;}
........
    <p id="p1">测试id选择器</p>

类选择器（class）
命名规则：不能以数字或中划线开头，命名尽量需要有意义。
结构：.类名 {css}
作用：找到页面中所有带有该类名标签，设置样式。
特点：1、所有的标签都有class属性，class属性的属性值就叫做类名。
2、一个标签可以有多个类名，类名之间通过空格隔开。
3、一个类选择器可以同时选中多个标签。多对多。
代码：

 p.p2{text-align: center;font-size: 40px; }.....
 <p class="p2">测试类选择器</p>

(3)外部选择器

就是另设一个css专门文件设计样式。
要在html引入文件代码：

<link rel="stylesheet" href="./05-外部样式.css">

link标签一般放在head的title后面。style也放在title后面。

二、字体和文本样式、背景

（1）字体

字体大小：font-size：数字+px（像素）-浏览器默认16px。1em的默认大小是16px。
字体粗细：font-weight：normal（400）bold（700）。
字体样式：font-style：normal或italic(倾斜)。
字体类型：font-family：字体1，字体2，字体3（顺序查找，pc未装的字体会跳过）
可以简写为：font: style weight size/line-height family
方便记忆：稍微舒服（swsf）

（2）文本

文本缩进： text-indent: 2em; 取值：数字 + px或em。
文本对齐：font-align：left or center or right
文本修饰：text-decoration：line-through（中划线）overline（上划线）underline（下划线）none（常用来删除超链接a标签的下划线）
文本转换： text-transform: lowercase;（转换成大写字母）lowercase（小写字母）capitalize（转换成单词首字母大写）

（3）背景

背景颜色：background-color：red （关键字） #fff（十六进制） rgb(255, 0, 255)
背景图片：background-image: url(“./杨幂_264.jpg”);
背景平铺：background-repeat：repeat-x（y）;

输入background-repeat: repeat-y;后：（往垂直方向平铺）

背景位置：background-position: right;top；bottom；left。

三、CSS盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

（1）margin外边距

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

margin:25px 50px 75px 100px;

上边距为25px
右边距为50px
下边距为75px
左边距为100px

margin:25px;

所有的4个边距都是25px

(2)border边框

CSS边框属性允许你指定一个元素边框的样式和颜色。
border-style 值:
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

border-style:dotted solid double dashed;

上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed

border-style:dotted solid;

上、底边框是 dotted
右、左边框是 solid

border-style:dotted;

四面边框是 dotted

Border的简写属性：border:5px solid red;（顺序无所谓）

总结border的属性，同margin类似

border-style：属性1，属性2，属性3，属性4

上->右->下->左

border-style：属性1，属性2，属性3

上->左右->下

border-style：属性1，属性2

上下->左右

border-style：属性1

上下左右属性相同

（3）

padding 属性的书写格式总共有以下几种：

padding: 10px;             /* 意思是上下左右值全是 10px */
padding:5px 10px;          /* 意思是上下为 5px，左右为 10px */
padding:1px 2px 3px 4px;   /* 这个写法意思是：上为 1px，右为 2px，下为 3px，左为 4px */
padding:5px 10px 7px;      /* 这种写法意思是：上为 5px，左右为 10px，下为 7px */

注意：padding 后面 4 个值定义的顺序分别为 – 上 右 下 左
而 padding-top 或者 padding-bottom 这种写法，只是单方面的定义了一个方向的值，这样写会增加 CSS 代码的长度，增加 CSS 样式的代码量，拖慢页面的加载速度。