1.CSS 初步认识

web 标准

w3c

结构   xhtml    table  p  hr  br   td    img  a

表现   CSS

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

CSS  就是层叠样式表

所以我们为什么要学习CSS

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

<table width=500>

<table>

2.CSS 语法规范 

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

例如： p{color：red；}

解析：

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

几点要求：

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

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

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

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

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

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

3.CSS的位置分类

　　1.行内样式表

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

　　<p style=” color:red ;”></p>

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

　　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的更多相关文章

  1. css.day01.eg

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

  2. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  3. CSS学习Day01

    1.什么是CSS 如何学习 CSS是什么 CSS怎么用 CSS选择器(重点+难点) 美化网页(文字.阴影.超链接.列表.渐变) 盒子模型 浮动 定位 网页动画(特效效果) 1.1什么是CSS Casc ...

  4. 黑马12期day01之html&css

    html注释:<!-- --> html中不支持空格.回车.制表符都会被解析成一个空格 <pre></pre>标签内以上三个会被正常解析. <font> ...

  5. 2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01

    HTML5 第一天 一.什么是 HTML5 1.HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一 ...

  6. Jquery day01

    day01: 基础--选择器.属性和CSS.文档处理 day02: 高级--筛选.事件.效果.ajax jQuery介绍 JS类库 JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用 ...

  7. 传智播客JavaWeb day01 快捷键、XML

    2015-01-14 一直计划着学习java,今天晚上终于下定决心看了下传智播客朴乾老师的javaweb开发视频day01之第一讲,主要内容是开发工具简单介绍.怎么创建工程.Junit的介绍,我是C# ...

  8. HTML及CSS学习笔记

    推荐博客:付铭 day-01 HTML 1.HTML 基本语法 html标签 单标签 <img /> .<img> 双标签 <html> </html> ...

  9. Javaweb学习笔记——（二）——————CSS概述，进入JavaScript

    day02day01内容回顾 1.html操作思想 **使用标签把要操作的数据包起来,通过修改标签的属性值来是实现标签内数据样式的变化 ***<font size="5"&g ...

随机推荐

  1. 在Site Settings下找不到Navigation标签

    有时候我们可能找不到Navigation标签, 仅仅在Look and Feel下面看到"Quick launch" 如何才能找到我们想要的"Navigation&quo ...

  2. 优化MYSQL FILESORT

    用Explain分析SQL语句的时候,经常发现有的语句在Extra列会出现Using filesort,根据mysql官方文档对他的描述: 引用 MySQL must do an extra pass ...

  3. Microsfot SQL Server 2012 日志收缩

    //Microsfot SQL Server 2012 日志收缩 USE DataBaseName;GO ALTER DATABASE DataBaseNameSET RECOVERY SIMPLE; ...

  4. [BZOJ 3626] [LNOI2014] LCA 【树链剖分 + 离线 + 差分询问】

    题目链接: BZOJ - 3626 题目分析 考虑这样的等价问题,如果我们把一个点 x 到 Root 的路径上每个点的权值赋为 1 ,其余点的权值为 0,那么从 LCA(x, y) 的 Depth 就 ...

  5. CSS预处理器之SASS用法指南

    CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...

  6. 【Java】Java Socket编程(1)基本的术语和概念

    计算机程序能够相互联网,相互通讯,这使一切都成为可能,这也是当今互联网存在的基础.那么程序是如何通过网络相互通信的呢?这就是我记录这系列的笔记的原因.Java语言从一开始就是为了互联网而设计的,它为实 ...

  7. JavaScript----Performance Tool and Process

    1. Syntax-------------JSLint, JSHint, 2. Combine------------YUI 3. Minify---------------JSMin

  8. Oracle预估的基数算法

    SQL> create table t as select * from dba_objects; Table created. SQL> create index idx_t on t( ...

  9. ZOJ-2112-Dynamic Rankings(线段树套splay树)

    题意: 完成两个操作: 1.询问一个区间里第k小的数: 2.修改数列中一个数的值. 分析: 线段树套平衡树,线段树中的每个节点都有一棵平衡树,维护线段树所记录的这个区间的元素.这样处理空间上是O(nl ...

  10. ubuntu server配置xmanager

    ubuntu server配置xmanager   ubuntu是典型的多用户多任务操作系统,通过XDMCP方式可以轻松的实现远程的多用户同时登录ubuntu任务.   www.2cto.com   ...