CSS&JavaScript 第二章:CSS基础

本文深入讲解CSS的基础知识,包括样式表的三种定义方式、基本语法、常用样式属性,以及如何定义内部和外部样式表。详细介绍了文字、背景、边框线、高度宽度、间距边距等样式属性的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

CSS基础

1.CSS简介

css通过样式表来表示网页的颜色、字体、背景色、等属性;

一些列的样式组成了样式表!!

定义样式表的3种方式:

1,外部样式表文件
2,内部样式表文件
3,元素种的样式表

2.CSS基本语法

.

一。元素中的样式表:

只要在元素中应用style属性就可以了。

二。常用样式属性:

1.文字:

font-family:vardana,sans-serif;	字体名
font-size: 1em;	字体大小
font-weight:bold;	字体粗细
font-style:italic;	字体样式(normal:正常;italic:斜体)
font-variant:是否是小型的大写字母

font:(style,variant,weight,size)以上5种综合运用顺序
color:	文字颜色
。。。。

"""
以上众多样式中,font-family,font-size必须要有
"""

2.背景
用于改变背景的颜色,背景图像及其位置等。

background-color:(transparent:透明) 背景颜色
background-image:(none:没有;url:图像路径及图像名)背景图片
background-position:()位置
background-repeat:(no-repeat:不重复;repeat:重复;repeat-x/y:水平或锤子方向重复)	背景重复方式

background:(color,image,repeat,position)综合应用(顺序)

3.边框线
用于改变指定元素的边框线粗细、类型、颜色等。

border-color: 颜色定义
border-style:(none();dotted(点线);dashed(虚线);solid(实线);)边框线类型
border-width:(thin();medium(中等);thick())边框线粗细定义

border:(width,style,color)综合应用顺序

4.高度和宽度
用于改变指定元素的高度和宽度.

weight:(auto(自动);百分比或长度定义)
width:(auto;百分比)

5.间距和边距
间距:padding(指的是元素中的内容与边框现的距离)
边距:margin(指的是元素之间的距离)

6.位置和布局
用于改变指定元素与其他元素之间的排列方式、显示方式等。

display:(none(不显示);inline(行显示);block(块显示);list-item(列表显示))指定元素的显示方式
position:(static(静态的);relative(相对的);absolute(绝对的))指定元素的位置坐标值

float和clear:

3.定义样式表

内部和外部样式表需要指定对象来定义样式表;

一.元素名对象

用于网页中所有的指定元素:

em{color: green}
"""
又有em元素都会变为绿色
"""
二.自定义对象

当网页中多个元素具有相同的样式时,可以自定义对象。
对象名之前为一个 ‘.’,应用时使用class属性,即class=自定义对象名

.big{ font-size : 120%}
"""
所有class=big的元素字体都会变大
"""
三.元素名和自定义对象的结合
p.big { font-size :120%}
li.big { font-weight:bold}
"""
p元素中标有class=big的字体都会变大;li元素中标有class=big的字体都会变为粗体
"""
四.标识名对象

用于指定的标识名元素,定义时标识名前有一个#;
标识名对象的样式只可用于一个元素

#nav {color:blue}
p#description {font-size:85%}
"""
标识名为nav的字体都是蓝色;p元素中标识名为description元素的字体都变小。
"""

4.内部样式表和外部样式表

一.内部样式表

将定义样式表的内容放在style元素中,并且设置type属性为text/css; 然后将style元素放在HTML文档的head元素中

<style type="text/css">
</style>
二.外部样式表

多个html文档使用相同的样式表定义时,用外部样式表。
将定义的内容放在一个文本文件中,一般都以.css为扩展名。
然后zaiHTML文档的head元素中插入link元素

<link rel="stylesheet" type="text/css" href="外部样式表文件.css">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值