初识CSS

一.初识css

1.什么是css

Cascading Style Sheet:层叠样式表,简称样式表。
作用:实现网页布局,美化网页

2.css的特性
  • 表现层和结构层完全分离,符合web标准
  • 便于团队开发(视觉设计师和内容编辑分离)
  • 便于网站的更新升级,维护性好
  • 用户体验好,网站性能高
  • 能够适应不同的显示设备

二.CSS基本语法

1.引入css的三种方法
(1)行内样式

就是直接在标签的开始标签中,使用style属性,如下:
<body>
<h1 style=”color:red;”>行内样式</h1>
</body>

(2)内部样式

直接使用style标签来完成,注意,style标签要写在head部分,不要写到body里面了。

在head部分,添加style标签,如下:
<style>
p{color:red;}
</style>
<body>
<p>内部样式</p>
</body>

(3)外部样式

分两步,
a.将css作为一个独立的文件来保存,一般后缀**.css**
b.使用link标签引入

说明:
  • 在实际开发的时候,通常使用外部方式
  • 在学习的时候,我们通常使用内部的方式

注意:还有一种方式,是@import ,但一般不建议使用,因为它会牺牲页面性能。

内联对应的是行内。

2.css基本语法

CSS样式(或规则)都必须由两部分组成:

  • 选择器(selector)
  • 声明块(declaration),包括属性(property)和属性值(value)

注意:

  • 声明块是由{}来构成的
  • 声明之间必须有一个分号,所以在写单个声明的时候,尽量加上最后的分号
  • 声明的属性和属性值之间使用冒号隔开,
  • 在写这些符号的时候,要注意必须是英文的。

CSS有一个特性,如果写错了,它不会报错,只是不起作用而言。
其中selector,翻译为选择器或选择符。

3.css选择器

通过前面的一个分析,我们发现在一条css规则中,真正重要的有三个东西:
选择器
属性
属性值
CSS非常强大,其中的一个表现就是他提供了灵活好用的选择器。

作用:用于选中我们需要处理的标签或内容。

(1)基本选择器
选择器 语法 说明
类选择器 e1 以文档对象类型的元素作为选择器,如p、div、span等
id选择器 #id 以作为元素对象的唯一标识符id属性作为选择器
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML(HyperText Markup Language)是一种用于创建网页的标记语言,它描述了网页的结构和内容。CSS(Cascading Style Sheets)是一种用于控制网页样式和布局的样式表语言。通过将HTML和CSS结合使用,可以创建出丰富多彩的网页样式。 在初识CSS时,你可以了解以下几个方面: 1. CSS的基本语法:CSS由选择器和声明块组成。选择器用于选择要应用样式的HTML元素,声明块中包含了一系列的样式属性和值。 2. 样式属性和值:CSS提供了丰富的样式属性和对应的取值,可以用来控制元素的外观、布局和动画效果。例如,可以使用"color"属性来设置文本颜色,使用"font-size"属性来设置字体大小。 3. 样式的应用方式:CSS样式可以通过三种方式应用到HTML元素上:内联样式、内部样式表和外部样式表。内联样式是直接写在HTML标签的"style"属性中,内部样式表是写在HTML文档头部的"style"标签中,而外部样式表是单独的CSS文件,通过链接到HTML文档中来应用样式。 4. CSS选择器:选择器用于选择要应用样式的HTML元素。常见的选择器有标签选择器、类选择器、ID选择器、属性选择器等。通过选择器的组合和嵌套,可以更精确地选择元素并应用样式。 5. 盒模型:CSS中的盒模型描述了元素在页面中所占的空间。它由内容区、内边距、边框和外边距组成。通过设置盒模型的属性,可以控制元素的大小、边距和边框样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值