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. tomcat源码阅读

    1      工具准备 需要SVN.Maven.JDK.Eclipse.Eclipse M2插件 2      下载源码及发布包 源码在这里:http://svn.apache.org/repos/a ...

  2. Hadoop环境搭建－入门伪分布式配置（Mac OS,0.21.0,Eclipse 3.6）

    http://www.linuxidc.com/Linux/2012-10/71900p2.htm http://andy-ghg.iteye.com/blog/1165453 为Mac的MyEcli ...

  3. MySQL基本查询语句练习

    努力很久只为获得别人尊重的眼光. ——我是,董宏宇,我为自己代言. 技术交流QQ:1358506549(请注明你的来意) use xsx; CREATE TABLE Course( Cno char( ...

  4. mysql安装2

    linux下安装mysql-5.1.51.tar.gz (2010-10-27 10:59:26) 转载▼ 标签: mysql 数据库 tar.gz安装 杂谈 分类: Mysql数据库 MySQL h ...

  5. 【最大流】ECNA 2015 F Transportation Delegation (Codeforces GYM 100825)

    题目链接: http://codeforces.com/gym/100825 题目大意: N(N<=600)个点,每个点有个名字Si,R(R<=200)个生产商在R个点上,F(F<= ...

  6. HDOJ 2073 无限的路

    Problem Description 甜甜从小就喜欢画图画,最近他买了一支智能画笔,由于刚刚接触,所以甜甜只会用它来画直线,于是他就在平面直角坐标系中画出如下的图形: 甜甜的好朋友蜜蜜发现上面的图还 ...

  7. iOS 沙盒路径操作：新建/删除文件和文件夹

    http://blog.csdn.net/totogo2010/article/details/7671144

  8. Java nextInt()函数

    nextInt( int num) 能接受一个整数作为它所产生的随机整数的上限,下限为零,比如:nextInt(4)将产生0,1,2,3这4个数字中的任何一个数字,注意这里不是0-4,而是0-3..但 ...

  9. 意大利进口的衬衫面料pH值严重超标·都市快报

    意大利进口的衬衫面料pH值严重超标·都市快报     意大利进口的衬衫面料pH值严重超标         董捷    2007-03-24           通讯员 浙 检 记 者 董 捷      ...

  10. angularJS服务一

    一 认识服务 1.服务这个概念其实并不陌生,在其他语言中如java便有这样的概念,其作用就是对外提供某个特定的功能,如消息服务,文件压缩服务等,是一个独立的模块.ng的服务是一个单例对象或函数,对外提 ...