css.day01

2022-10-23 18:08:06

1.CSS 初步认识

web 标准

w3c

结构 xhtml table p hr br td img a

表现 CSS

CSS 最大的好处就是让结构和表现实现了分离

CSS 就是层叠样式表

所以我们为什么要学习CSS

注意：以后的代码标签的属性值，就全部放到 CSS里面了。

<table>

2.CSS 语法规范

格式：选择器 { 属性：值；}

例如： p{color：red；}

解析：

选择器：说到底目的是选定某个标签用的。（给谁改样式）

几点要求：

1.首先还是采取键值对的格式，但是，属性和值之间用冒号隔开。

2.每个键值对结束用分号表示。

3.键值对都是包含在一对大括号内的。

4.键值对可以有多组。（用分号隔开）

5.font-size:12px; 字体大小用font-size 一般情况下所有数字带单位（px）

0除外 0后面不要跟单位。

3.CSS的位置分类

　　1.行内样式表

　　行内样式表写在标签内部。格式如下：

　　这种情况尽量少用。一般适合于很少情况下。或者为了提高权重，因为行内样式表的权重最高。

　　2.内嵌样式表

　　内嵌样式表写在html文件内，放在<head></head> 之间，几乎都是贴着</head>上方

　　格式如下：

  <style type=”text/css”>

     p{color:red;}

 </style>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

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

　　　div{font-size:14px; color:#03C;}

</style>

</head>

<body>

<p> </p>

<p> </p>

<p> </p>

<div> </div>

<div> </div>

<ul> </ul>

<dl></dl>

</body>

</html>

　　3.外部样式表　　

　　外部样式表写在站点内部。单独新建一个CSS 文件（css文件的后缀名是.CSS）

　　可以通过链接或者导入的方式进入到 html 页面中。

　　第一链接方式：

<title>无标题文档</title>

<link rel="stylesheet" href="link.css" type="text/css" />

</head>

　　link这个语句也是放到 </head> 的上方

　　好处：

　　　　1. 页面的加载速度快

　　　　2. 可以控制多个页面

　　　3. 统一修改方便。

　　第二导入样式表（相对较少，不提倡用）

　是把一个CSS 文件导入的到另外一个CSS 文件中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>规范</title>

<style type="text/css">

 @import url(link.css);

</style>

</head>

<body>

<p></p>

<p></p>

<p></p>

<div></div>

<div></div>

<ul></ul>

<dl></dl>

</body>

</html>

　　1. 行内样式表

　　权重最高但是只能控制一个标签样式

2. 内嵌样式表

　　权重其次但是可以控制整个页面样式

3.外部样式表（链接式导入式）

　　权重最低但是可控制整个站点（网站）的文件样式

4.网页显示模式

　　不同元素有不同的显示方式

　　1.块级显示模式

　　代表： div p li ul ol dl ...

　　特点:

　　　　1. 自己单独占一行（比较霸道）自上而下显示

　　　　2. 可以设置高度和宽度

　　　　ps：给盒子指定了宽高背景之后就可以显示实体，我们称之为实体化。

　　2.行内显示模式

　　代表：span font b i em a ....

　　特点：

　　　　1. 一行内显示。自左往右显示。

　　　　2. 不能设置宽和高。

　　3.行内块显示模式

　　没有标签是这种显示模式。

　　先空着

　　给标签使用 : display:inline-block; 转换成行内块显示模式。

　　特点：既有行内一行内显示又有块级的宽和高。

5.显示模式之间的相互转换

　　块级显示模式可以转换成行内显示模式： display 显示 display: inline;

　　行内显示模式转化为块级显示元素： dispaly:block;

6.Css 选择器（选择符）分类

　　css 基础选择器

　　css 复合选择器

　　先看基础选择器：

　　1.类选择器以“点” . 来定义用 class 来引用

　　　　注意：

　　　　　　1.必须以点开头不能省略。

　　　　　　2.后面类的名字不要用标签名不要以数字开头更不能纯数字。

　　　　　　3.上面定义，下面使用， class=”类名” class=”lan”　　　　　　

　　　　　　font-weight:bold css 字体加粗 bold = 700 等价　　

　　2.ID选择器以 # 来定义用 id 来引用

　　　　类选择器和id选择器的区别　　

　　　　1.class 选择器多次使用没有限制

　　　　2.id 选择器用且仅用一次唯一的

　　　　id 要比 class 执行速度快很多

　　3.标签选择器　　

　　注意：CSS写法

　　text-align:center 文本居中对齐

　　text-indent:2em; 首行缩进2个字

　　em 是一个相对单位 1em 就是一个字的距离

　　line-height: 25px; 行高

　　letter-spacing:1px 字间距

7.CSS 层叠性继承性优先级

　　1.层叠性

　　　　CSS 层叠样式表

　　　　层叠性：就是后面的标签样式会覆盖原先标签样式。（后来居上）远亲不如近邻优先执行最近的标签样式青出于蓝而胜于蓝

　　2.继承性

　　龙生龙凤生风老鼠生的孩子会打洞子级标签会大部分继承父级标签的样式。（一般文字元素的样式都会继承）

　　3.优先级

　　外部样式表 < 内嵌样式表 < 行内样式表

　　标签选择器< 类选择器 < id 选择器 < 行内样式表

　　1 10 100 1000

　　class 里面可以放多个类名：

　　格式是： class=”类名1 类名2”

　　版权之类的符号：必须用font-family:Arial；特殊声明

　　倾斜 em 改成正常字体： font-style:normal

　　加粗 strong 改成正常字体 font-weight：normal；

转载请注明出处

码农公寓

相关文章