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>上方

　　格式如下：

  1.   <style type=”text/css”>
  2.      p{color:red;}
  3.  </style>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7.      ul{font-size:12px; color:red;}
  8. 　　　div{font-size:14px; color:#03C;}
  9. </style>
  10. </head>
  11. <body>
  12. <p> </p>
  13. <p> </p>
  14. <p> </p>
  15. <div> </div>
  16. <div> </div>
  17. <ul> </ul>
  18. <dl></dl>
  19. </body>
  20. </html>

　　3.外部样式表　　

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

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

　　第一链接方式：

  1. <title>无标题文档</title>
  2. <link rel="stylesheet" href="link.css" type="text/css" />
  3. </head>

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

　　好处：

　　　　1. 页面的加载速度快

　　　　2. 可以控制多个页面

　　　3. 统一修改方便。

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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>规范</title>
  6. <style type="text/css">
  7.  @import url(link.css);
  8. </style>
  9. </head>
  10. <body>
  11. <p></p>
  12. <p></p>
  13. <p></p>
  14. <div></div>
  15. <div></div>
  16. <ul></ul>
  17. <dl></dl>
  18. </body>
  19. </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. 项目任务管理（TaskMgr）技术篇

    判定是否为枚举型:type.IsEnum 应用原型:如果是枚举返回字符型,如果是其他类型直接返回: object value = pro1.FieldType.IsEnum ? pro1.GetVal ...

  2. Swift中KIF测试的特点－b

    我最近在忙着回归到过去测试代码的老路子,使用KIF和XCTest框架,这样会使得iOS中的测试变得简单.当我开始捣鼓KIF的时候,我用Swift写的应用出了点小问题,不过最终还是很机智的搞定了.在我写 ...

  3. GC的前世与今生

    GC的前世与今生 虽然本文是以.net作为目标来讲述GC,但是GC的概念并非才诞生不久.早在1958年,由鼎鼎大名的图林奖得主John McCarthy所实现的Lisp语言就已经提供了GC的功能,这是 ...

  4. 工作总结：VS2010/MFC编程入门之十六（对话框：消息对话框）

    原文地址:http://www.jizhuomi.com/software/171.html 我们在使用Windows系统的过程中经常会见到消息对话框,提示我们有异常发生或提出询问等.因为在软件开发中 ...

  5. Count The Carries

    hdu:http://acm.hdu.edu.cn/showproblem.php?pid=4588 题意:给你 a,b两个数,然后让a到b之间的数做2进制的加法,问你与多少次进位.例如:1,3,1+ ...

  6. STM32F10x 学习笔记5（USART实现串口通讯 1）

    STM32F10x 系列单片机中都包含了USART 模块,所谓USART,就是通用同步异步收发器.通用同步异步收发器(USART)提供了一种灵活的方法与使用工业标准NRZ异步串行数据格式的外部设备之间 ...

  7. 一句话改变TGraphicControl控件的left坐标的前世今生

    稍微用脑子想了一下,图形控件没有句柄,因此先把自己的坐标改一改,然后只要把父控件的某些区域Invalidate一下就可以了,WM_PAINT消息一来,父控件就会重绘所有子图形控件,就达到了相应的效果. ...

  8. 设计模式 Mixin (混入类)

    混入(mix-in)类代表类之间的另一种关系.在C++中,混入类的语法类似于多重继承,但是语义完全不同.混入类回答"这个类还可以做什么"这个问题,答案经常以"-able& ...

  9. WordPress Duplicator 0.4.4 Cross Site Scripting

    测试方法: 提供程序(方法)可能带有攻击性,仅供安全研究与教学之用,风险自负! Advisory ID: HTB23162 Product:DuplicatorWordPressPlugin Vend ...

  10. 《University Calculus》-chaper13-多重积分-三重积分的引入

    承接之前对一重积分和二重积分的介绍,这里我们自然的引出三重积分. 在二重积分的引入中,我们曾经埋下过一个小伏笔,二重积分的几何意义是求解一个体积,但是我们仅仅限定在了曲顶柱体的几何体,那么对于完全由曲 ...