CSS入门介绍

目录

一.CSS

1.属性选择器

2.分组和嵌套选择器

3.伪类选择器

4.伪元素选择器

5.选择器的优先级

二.CSS属性相关

1.宽和高

2.字体属性

（1）font-weight用来设置字体的字重（粗细）

（2）文本颜色

（3）文字对齐

（4）文字装饰

 （5）背景属性

3.display属性

二.CSS盒子模型

---

一.CSS

1.属性选择器

通过标签的属性来查找标签，标签都有属性

id值和class值是每个标签都自带的属性，还有另外一种，自定义属性

针对于username="kevin" password="123"属性就是div标签的自定义属性

2.分组和嵌套选择器

分组选择器使用逗号隔开，所有的选择器都是并列的

组合（嵌套）选择器使用的是空格隔开，选择器不是并列的，最终生效的还是最后一个选择器

3.伪类选择器

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 
a:active {
  color: #0000FF
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

4.伪元素选择器

 p:first-letter {
            font-size: 48px;
            color: red;
}

    /*在每个
元素之前插入内容*/
    p:before {
        content: "你好啊";
        color: red;
    }

        /*在每个
元素之后插入内容*/
 p:after {
    content: "[?]";
    color: blue;
}

before和after多用于清除浮动。它可以解决浮动中得父标签塌陷问题!!!

5.选择器的优先级

比较选择器的优先级高低

1.选择器相同的情况下：

                离谁越近，就听谁的，就近原则

2.选择器不同的情况下：

                行内选择器  >>>  id选择器  >>>  类选择器  >>>  标签选择器

二.CSS属性相关

1.宽和高

宽和高

width属性可以为元素设置宽度

height属性可以为元素设置高度

（块儿级标签才能设置宽度，内联标签的宽度由内容来决定）

***默认情况下，只有块儿级元素才能设置长宽，内联元素不能设置，就算设置了也没效果***

2.字体属性

（1）font-weight用来设置字体的字重（粗细）

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，700等同于bold
inherit	继承父元素字体的粗细值

（2）文本颜色

颜色属性被用来设置文字的颜色

颜色是通过CSS最经常的指定：

• 十六进制
  • FF0000
• RGB值
  • RGB（255,0,0）
• 颜色名称
  • red

（3）文字对齐

text-align  属性规定元素中的文本的水平对齐方式

left	左对齐，默认值
right	右对齐
center	居中对齐

（4）文字装饰

text-decoration

none	默认，定义标准的文本
underline	定义文本下的一条线
overline	定义文本上的一条线
line-through	定义穿过文本下的一条线

 （5）背景属性

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

# 支持简写
background:#336699 url('1.png') no-repeat left top;
    
# 边框
边框属性 
● border-width
● border-style
● border-color
#i1 {
  border: 2px solid red;
}

border-radius
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。

3.display属性

display:"none"   HTML文档中元素存在，但是在浏览器中不显示，一般用于配合JavaScript代码使用

• display:"block"
  • 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分
• display:"inline"
  • 按行内元素显示，此时再设置元素的width，height，margin-top，margin-bottom和float属性都不会有什么影响
• display:"inline-block"
  • 使用元素同时具有行内元素和块儿级元素的特点

二.CSS盒子模型

以快递盒为例：

1. 快递盒与快递盒之间的距离称之为是外边距，用margin值表示
2. 快递盒和里面的物品之间的距离称之为是内边距，用padding来表示
3. 盒子的厚度我们称之为边框，用border来表示
4. 物品的实际大小称之为content

float浮动

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

clear
clear属性规定元素的哪一侧不允许其他浮动元素。

值    描述
left    在左侧不允许浮动元素。
right    在右侧不允许浮动元素。
both    在左右两侧均不允许浮动元素。
none    默认值。允许浮动元素出现在两侧。
inherit    规定应该从父元素继承 clear 属性的值。

清除浮动

清除浮动的副作用（父标签塌陷问题）

主要有三种方式：
● 固定高度
● 伪元素清除法
● overflow:hidden
伪元素清除法（使用较多）：
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}