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标签中,如下面代码:

<p style="color:red">这里文字是红色。</p>

 

嵌入式:

把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色:

<style type="text/css">

span{

color:red;

}

</style>

嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间

 

外部式:

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:

<link href="base.css" rel="stylesheet" type="text/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中的标签元素大体被分为三种不同的类型:块状元素内联元素(又叫行内元素)内联块状元素

常用的块状元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有:

<img>、<input>

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.固定定位

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值