第一讲 CSS基础

2022/3/2 23:17:00

编程Tag： 选择器浏览器基础 css 样式文档第一

本文主要是介绍第一讲 CSS基础，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、CSS解释：层叠样式表（Cascading Style Sheets）

优点：

使HTML专注于网页的内容，CSS专注于网页的表现
提供了丰富的格式化功能
可以针对各种可视化浏览器（主要有显示器、打印机、PDA等）来设置不同的样式

注意：

（1）CSS与浏览器并不是所有的CSS的样式都被浏览器支持

（2）不同的浏览器对CSS的实现有细微的不同，需要特别注意

注释方式

html：使用  表示（快捷键为crtl+？）

css：使用/*注释内容*/表示

/* 这是一条注释 */

二、引入CSS样式

行内样式	<div style="color:red">内容</div>
内嵌样式	<style> div{ color:red; } </style> 注意：<style>标记要指定type属性为text/css
链接样式(外链式)	例：<link type="text/css" rel="stylesheet" href=“sy.css" />
使用导入样式	@import url(“sheet1.css”); @import “sheet1.css”;

注意：样式间的大小顺序

多种方式引入CSS时，作用的优先级

基本原则：“最晚，优先级最高”

一般优先顺序是：行内，内嵌，链接

三、CSS选择器

标签选择器	权重（1）	标签名{ 样式属性名：属性值； }
类选择器	权重（10）	.类名{ 样式属性名：属性值； }
id选择器	权重（100）	#id值{ 样式属性名：属性值； }
包含选择器	权重（权重相加）	选择器E 选择器F{ 样式属性名：属性值； }

四、字体相关样式

1、font-size 字体大小

2、font-family 字体系列多个字体间用逗号隔开，英文字体名称中间有空格，用引号引起来

3、font-style 字体风格

normal 正常
italic 斜体
oblique 倾斜

4、font-weight 字体粗细

normal	正常
bold	粗体
bolder	加粗
lighter	细体

注意：字体粗细分为：100-900 9个层次

5、line-height 行高：单位px 若无单位，表示倍数

6、颜色表达

（1）直接表示

直接使用颜色的英文单词，如red tips：很多浏览器不支持颜色的单词表示

（2）三色值表示

使用三色的数值，如rgb(120,222,100)

tips：数值在0~255之间

使用三色的百分比，如rgb(10%,20%,100%)

使用三色数值的十六进制，如#0000ff

tips：推荐使用这种方式，十六进制值前加#

五、简答题

1、link和@import导入外部样式的区别

（1）link属于XHTML标签，link标签除了可以加载css外，还可以定义RSS、定义rel连接属性等； @import完全是CSS提供的一种方式；

（2）输入方式不同；

（3）加载顺序不同；link优先加载CSS文件到页面，@import先加载HTML结构，再加载CSS文件；

2、href和src的区别

href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。

例如：<link href="reset.css" rel=”stylesheet“/>

浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。

src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。

例如<script src="script.js"></script>

当浏览器解析到该元素时，会暂停浏览器的渲染，知道该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。

简而言之，src用于替换当前元素；href用于在当前文档和引用资源之间建立联系。
简而言之：href(hypertext, 超文本引用),建立元素和外部文档的链接。
src(source 资源引入), 是页面内容的一部分

这篇关于第一讲 CSS基础的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！