css.day01
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的更多相关文章
- 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 ...
随机推荐
- sql的执行顺序
sql的一般执行顺序(8)SELECT (9)DISTINCT (11)<Top Num> <select list>(1)FROM [left_table](3)<jo ...
- Windows Phone 8学习 启动器
1.发邮件 EmailComposeTack email=new EmailComposeTask(); email.To="收件人"; email.Subject="标 ...
- 【Linux】常用命令 lsof查看打开的文件
Linux系统把软硬件都抽象成文件,所以通过文件可以追踪到很多重要信息,如读取的配置文件.打开的端口等. 下面是常见的用法: 默认测试文件名为text.txt 1,显示打开text.txt的进程: l ...
- BZOJ 1563 诗人小G
Description Input Output 对于每组数据,若最小的不协调度不超过\(10^{18}\),则第一行一个数表示不协调度若最小的不协调度超过\(10^{18}\),则输出"\ ...
- Cognos请求流程——<转>
访问Cognos8 匿名访问 用户通过浏览器发起Cognos访问请求,请求被送至Cognos Gateway Gateway接收请求并发送给一个dispatcher dispatcher发现请求没有附 ...
- IOS的 testflight测试设置
管理员邀请参与者 1.登录开发者账号https://developer.apple.com/account 2.进入后,点击ituns connect 3.点击进入用户和职能 4.在用户栏点击添加按钮 ...
- Combination Sum III —— LeetCode
Find all possible combinations of k numbers that add up to a number n, given that only numbers from ...
- HDOJ(HDU) 2109 Fighting for HDU(简单排序比较)
Problem Description 在上一回,我们让你猜测海东集团用地的形状,你猜对了吗?不管结果如何,都没关系,下面我继续向大家讲解海东集团的发展情况: 在最初的两年里,HDU发展非常迅速,综合 ...
- bzoj 1927 [Sdoi2010]星际竞速（最小费用最大流）
1927: [Sdoi2010]星际竞速 Time Limit: 20 Sec Memory Limit: 259 MBSubmit: 1576 Solved: 954[Submit][Statu ...
- [jAudio] JAVA上经典特征提取工具
1.下载Jar包后引入 现在的问题是jAudio通常是给人UI进行操作的,直接使用怎么办? 看了源码,发现特征提取是通过类之间交叉调用实现的,是否有办法整合一下?