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. Zookeeper的设计模式之观察者模式(十)

    Watcher是Zookeeper用来实现distribute lock, distribute configure, distribute queue等应用的主要手段.要监控data_tree上的任 ...

  2. spoj SORTBIT - Sorted bit squence

    Let's consider the 32 bit representation of all integers i from m up to n inclusive (m ≤ i ≤ n; m × ...

  3. linker command failed with exit code 1

    这种问题,通常出现在添加第三方库文件或者多人开发时. 这种问题一般是找不到文件而导致的链接错误. 我们可以从如下几个方面着手排查. 1.以如下错误为例,如果是多人开发,你同步完成后发现出现如下的错误. ...

  4. BZOJ 2432 兔农

    Description 农夫栋栋近年收入不景气,正在他发愁如何能多赚点钱时,他听到隔壁的小朋友在讨论兔子繁殖的问题. 问题是这样的:第一个月初有一对刚出生的小兔子,经过两个月长大后,这对兔子从第三个月 ...

  5. Unity3d开发IOS游戏 基础

    Unity3d开发IOS游戏 基础 @阿龙 -  649998群 1.先说明两个问题,我在WIN7下面的U3D里面,用了雅黑字体,但是导出为ios后,字体就看不见了,这是为什么呢?这是需要在MAC下找 ...

  6. ASP.NET Routing

    ASP.NET Routing Other Versions   ASP.NET routing enables you to use URLs that do not have to map to ...

  7. Mysql分页查询

    取前5条数据 select * from table_name limit 0,5 或 select * from table_name limit 5 取第11条到第15条数据,共5条 select ...

  8. 14.5.3 Locks Set by Different SQL Statements in InnoDB

    14.5.3 Locks Set by Different SQL Statements in InnoDB 通过不同的SQL语句设置的锁 在InnoDB中 一个锁定读, 一个UPDATE 或者一个D ...

  9. 根据div 标签 查看数组@class=modulwrap 下面的/table/tbody/tr/td

    <div class="modulwrap"> <div class="request_title"> <span class=& ...

  10. 总结&计划

    最近完成的事儿: 1. 看完了<c专家编程>并且整理了读书笔记 2. 看了半章<大数据>发现这本书里面是纯纯的干货...习题需要认真做,算法需要仔细体会...不适合突击,尤其是 ...