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 ...
随机推荐
- Linux 查看 80 端口的占用情况
lsof -i:端口号 eg: lsof -i:80 lsof -i:21 [root@localhost ~]# lsof -i: COMMAND PID USER FD TYPE DEVICE S ...
- Unity3D Quaternion各属性和函数测试
Quaternion属性与方法 一,属性: x.y.z就不说了,只看一个eulerAngles,代码如下: public Quaternion rotation = Quaternion.identi ...
- oracle 查询dblink的方法
oracle 查询dblink的方法: SYSDBA登录, sys登录 SELECT * FROM SYS.link$;
- [BZOJ 1188] [HNOI2007] 分裂游戏 【博弈论|SG函数】
题目链接:BZOJ - 1188 题目分析 我们把每一颗石子看做一个单个的游戏,它的 SG 值取决于它的位置. 对于一颗在 i 位置的石子,根据游戏规则,它的后继状态就是枚举符合条件的 j, k.然后 ...
- 图片的css自适应
当需要css来缩放图片的时候,可以采用外层容器100%或者任意百分比, 内层图片img tag 没有宽高,用sass写经过断点后的mixin中的样式就是这样: .workscon_section{ w ...
- sql server更改机器名后更改数据库机器名
方式一: 本地机器名查询: select * from sys.servers 修改机器名: sp_dropserver 'old server name' sp_addserver 'new ser ...
- C# yield return 用法与解析
原文:C# yield return 用法与解析 C# yield return 用法与解析 本文参考自:http://www.jb51.net/article/54810.htm 当初没有认真理解 ...
- MySQL使用rand函数实现随机数
sql 的随机函数newID()和RAND() sql server的随机函数newID()和RAND() SELECT * FROM Northwind..Orders ORDER BY NEWID ...
- fedora下体验gentoo安装
服务器上安装了fedora,但是对gentoo很想体验一番,没有新机器,不想重装系统,所以只能chroot来体验getoo了. 下载portage-20130817.tar.bz2和stage3-am ...
- zabbix 四张大表分区
trends_uint.ibd history history_unit trends CREATE TABLE `trends` ( `itemid` bigint(20) unsigned NOT ...