web前端——css基础

目录

一、css语法

二、css 样式的三种引入方式

三、css选择器

四、css 文本样式与字体样式

五、链接样式与列表样式

六、css背景

七、 css盒子模型

八、css定位

一、css语法
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：

p{font-size:12px;color:red;}

注意：

1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。

2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：

p{

font-size:12px;

color:red;

}

二、css 样式的三种引入方式
内联式

ss样式表就是把css代码直接写在现有的HTML标签中，如下面代码：

这里文字是红色。

嵌入式：

把css样式代码写在标签之间。如下面代码实现把三个标签中的文字设置为红色：

嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间

外部式：

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在

三、css选择器

1. 什么是选择器

每一条css样式声明（定义）由两部分组成，形式如下：

选择器{

样式;

}

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

2. 常用选择器

标签选择器

类选择器

ID选择器

子选择器

后代选择器

分组选择器

组合选择器

3. 选择器的优先级

权值的规则：

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p{color:red;} /权值为1/

p span{color:green;} /权值为1+1=2/

.warning{color:white;} /权值为10/

p span.warning{color:purple;} /权值为1+1+10=12/

#footer .note p{color:yellow;} /权值为100+10+1=111/

注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

四、css 文本样式与字体样式
文本样式

字体样式

五、链接样式与列表样式

list-stype-type的属性值

六、css背景

七、 css盒子模型

1. 元素分类

在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

、

、

...

、

1. 、
   • 、

     、、

     、

     、

常用的内联元素有：

、、
、、、、、、、、

常用的内联块状元素有：

、

2. CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明

Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响

Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响

Content（内容） - 盒子的内容，显示文本和图像

为了在所有浏览器中的元素的宽度和高度设置正确的话，你需要知道的盒模型是如何工作的。

3. css边框

使用border属性可以设置边框

p {
border:5px solid red;

}

4. css内边距

使用padding属性设置内边距

div{padding:20px 10px 15px 30px;}

5.css 外边距

使用margin属性设置内边距

div{margin:20px 10px 15px 30px;}

八、css定位
1.绝对定位

2.相对定位

3.固定定位
————————————————
版权声明：本文为CSDN博主「鸣珂锵玉」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/mdxiaohu/article/details/81322793