CSS基础、盒子模型、选择器

目录

1.CSS基础

CSS字体属性

CSS文本属性

CSS引入方式

2.盒子模型

盒模型

边框属性

内边距属性

外边距属性

3.选择器

基础选择器

标签选择器

类选择器

id选择器

通配符选择器

复合选择器

后代选择器

子选择器

并集选择器

伪类选择器 

---

1.CSS基础

CSS字体属性

CSS Fonts(字体)属性用于定义字体系列、大小、粗细和文字样式。

字体系列

CSS使用font-family属性定义文本的字体系列。

常见字体：body{font-family:'Microsoft YaHei',hahoma,arial,'Hiragino Sans GB'}

注意：如果取值是中文，需要用双引号或者单引号括起来；设置字体必须是已经安装的字体

字体大小

CSS使用font-size属性定义字体大小。

p { 
    font-size: 20px; 
}

注意：不同浏览器默认显示的字号大小不一致；可以给body指定整个页面文字的大小

字体粗细

CSS使用font-weight属性设置文本字体的粗细

p {
    font-weight: bold;
}

属性值	描述
normal	默认值
bold	加粗
100~900	100等同于默认，700等同于加粗

文字样式

CSS使用font-style定义文字样式 。

p {
    font-style: normal;//或者italic(斜体)
}

文字属性缩写

font：font-style font-weight font-size/line-height font-family; 

CSS文本属性

CSS Text(文本)属性可定义文本的外观，比如文本颜色、对齐文本、装饰文本、文本缩进、行间距等。

文本颜色

表示	属性值
预定义的颜色值	red。green，blue
十六进制	#FF0000
RGB代码	rgb(255,0,0)

文本对齐

div {
    text-align: center;
}

属性值	说明
left	左对齐(默认)
right	右对齐
center	居中对齐

文本装饰

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

div {
    text-decoration: underline; 
}

属性值	说明
none	默认
underline	下划线
overline	上划线
line-through	删除线

文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落首行缩进。

div {
    text-indent: 10px;
}

p {
    text-indent: 2em;
}

em是相对单位，表示当前元素1个文字的大小，如果当前元素没有设置大小，会按照父元素的1个文字大小。 

行间距

line-height属性用于设置行间的距离(行高)。

行间距：上间距、文本高度、下间距

CSS引入方式

内部样式表(行内式)

内部样式表(内嵌样式表)是写到html页面内部，将所有CSS代码抽取出来，单独放到一个<style>标签中。

<style>
    div {
    color: red;
    font-size: 12px;
}
</style>

行内样式表(嵌入式)

行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式。适合修改简单样式。

<div style="color: red; font-size: 12px;">文本</style>

外部样式表(链接式)

1.新建一个后缀名为.css的样式文件

2.在HTML标签中使用<link>标签引入这个文件

<link rel="stylesheet" href="css文件路径">

2.盒子模型

盒模型

边框属性

border可以设置元素的边框。边框由三部分组成：边框宽度(粗细)，边框样式，边框颜色

border : border-width || border-style || border-color

border-collapse属性控制浏览器绘制表格边框的方式，控制相邻单元格的边框。

border-collapse:collapse; 表示相邻边框合并在一起

内边距属性

padding属性用于设置内边距，即边框与内容之间的距离。

padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

值的个数	表达意思
padding：5px	1个值，代表上下左右都有5像素的内边距
padding：5px 10px	2个值，上下5像素，左右10像素
padding：5px 15px 20px；	3个值，上5像素，左右15像素，下20像素
padding：5px 10px 15px 20px；	4个值，上右下左

外边距属性

margin属性用于设置外边距，即控制盒子和盒子的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

3.选择器

选择器分为基础选择器和复合选择器两大类

基础选择器

基础选择器：标签选择器、类选择器、id选择器和通配符选择器

标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

标签名{
    属性1：属性值1；
    属性2：属性值2；
    属性3：属性值3；
    ...
}

优点：快速为页面中同类型的标签统一设置样式

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个“.”（英文）显示。

.类名 {
    属性1：属性值1；
    ...
}

 类选择器——多类名

给一个标签指定多个类名，从而达到更多的选择目的。

1.多类名使用方式

<div class="red font20">文字</div>

(1)在标签class属性中写多个类名

(2)多个类名中间用空格隔开

2.多类名开发中使用场景

(1)可以把标签元素相同的样式放到一个类里面.

(2)标签可以调用这个公共的类，然后在调用自己独有的类.

<div class="red back">文本1</div>
<div class="back">文本2</div>
<div class="purple back">文本3</div>
<div class="blue">文本4</div>

id选择器

id选择器可以为标有特定的id的HTML元素指定特定的格式。

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

#id名 {
    属性1：属性值1；
    ...
}

注意：id选择器是唯一的，不得重复，经常与JavaScript搭配使用

通配符选择器

通配符选择器使用"*"定义，它表示选取页面中所有元素(标签)。

* {
    属性1：属性值1；
    ...
}

通配符选择器不需要调用，自动就给所有的元素使用样式。

复合选择器

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等。

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

元素1 元素2{样式声明}

子选择器

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。

元素1 > 元素2(样式声明)

div > p {样式声明} 选择div里面所有最近一级 p 标签元素

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

元素1，元素2{样式声明}

ul,div{样式声明} 选择ul和div标签元素

伪类选择器 

伪类选择器用于某些选择器添加特殊的效果，比如给链接添加特殊的效果

 链接伪类选择器

a:link	选择所有未被访问的链接
a:visited	选择已经被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择活动链接

focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素，主要针对表单元素

input： focus {
    background-color:red;
}

选择器	作用	特征	使用
后代选择器	用来选择后代元素	可以使子孙后代	符号是空格
子代选择器	选择最近一级元素	只选择最近的	符号是大于
并集选择器	选择某些相同样式的元素	只能用于集体声明	符号是都好
链接伪类选择器	选择不同状态的链接	与链接相关
:focus选择器	选择获得光标的表单	与表单相关