css.day01

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；

转载请注明出处

css.day01的更多相关文章

css.day01.eg
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
CSS学习Day01
1.什么是CSS 如何学习 CSS是什么 CSS怎么用 CSS选择器(重点+难点) 美化网页(文字.阴影.超链接.列表.渐变) 盒子模型浮动定位网页动画(特效效果) 1.1什么是CSS Casc ...
黑马12期day01之html&css
html注释: html中不支持空格.回车.制表符都会被解析成一个空格 <pre></pre>标签内以上三个会被正常解析. <font> ...
2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01
HTML5 第一天一.什么是 HTML5 1.HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一 ...
Jquery day01
day01: 基础--选择器.属性和CSS.文档处理 day02: 高级--筛选.事件.效果.ajax jQuery介绍 JS类库 JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用 ...
传智播客JavaWeb day01 快捷键、XML
2015-01-14 一直计划着学习java,今天晚上终于下定决心看了下传智播客朴乾老师的javaweb开发视频day01之第一讲,主要内容是开发工具简单介绍.怎么创建工程.Junit的介绍,我是C# ...
HTML及CSS学习笔记
推荐博客:付铭 day-01 HTML 1.HTML 基本语法 html标签单标签 <img /> .<img> 双标签 <html> </html> ...
Javaweb学习笔记——（二）——————CSS概述，进入JavaScript
day02day01内容回顾 1.html操作思想 **使用标签把要操作的数据包起来,通过修改标签的属性值来是实现标签内数据样式的变化 ***<font size="5"&g ...

随机推荐

Unity问答——怎么知道屏幕中目前有多少个敌人？
这篇博客源自我在泰课在线的回答.链接:http://www.taikr.com/group/1/thread/92 问:怎么知道屏幕中目前有多少个敌人? 答: 思路一:仅适用于2D游戏,因为这个方法没 ...
DB2中SQLSTATE=57016 SQLCODE=-668
执行 alter table DW_RPT.TRPT_JV_COGNOS_RPT add CENTER_CD varchar(10) ALTER TABLE DW_RPT.TRPT_JV_COGNOS ...
Delphi重载，覆盖，多态
一.override 重载 type TFigure = class procedure Draw; virtual;//(我的理解是)父类中可以使用父类的,子类中使用子类的.与“四”是有区别的. e ...
Json传递后台数据的问题
在后台我有两个类: public Class Person { private String name; private Address address;//一个自定义的类 //getter和sett ...
XFS：大数据环境下Linux文件系统的未来？
XFS:大数据环境下Linux文件系统的未来? XFS开发者Dave Chinner近日声称,他认为更多的用户应当考虑XFS.XFS经常被认为是适合拥有海量数据的用户的文件系统,在空间分配方面的可 ...
Data 语义学(2)
四."继承"与 Data Member (1). 只有继承没有多态先来看个例子 #include <iostream> using namespace std; cl ...
swiper 多个循环的实现
swiper 最好要一一对应,最好与id关联. new Swiper('#guess .swiper-container', { pagination: '#guess .swiper-paginat ...
kernel解读之 pick_next_rt_entity
1328 static struct sched_rt_entity *pick_next_rt_entity(struct rq *rq, 1329 struct rt_rq *rt_rq) 133 ...
自定义WCF的配置文件
原文地址:http://www.cnblogs.com/shanyou/archive/2008/12/02/1346298.html WCF的承载既可以通过编码实现,也能够通过配置实现.而且使用配置 ...
手机app
手机app是什么? 由于iPhone.三星等智能手机的逐步流行和广泛普及,手机app这个词语开始频繁的出现在广大手机网民的视线中.也许你们还不知道什么是手机app,但你一定下载过手机app,你的手机里 ...

css.day01

css.day01的更多相关文章

随机推荐

热门专题