HTML 基础 2
1. 认识CSS样式：
CSS：层叠样式表（Cascading Style Sheets），主要用于定义HTML内容在浏览器内的显示样式
语法：
选择符{ 属性: 值}
举例：
p{ color: blue}
选择符：又称选择器，指明要应用样式规则的元素，如<html>、<body>、<h1>、<p>、<img>...
声明：指的是冒号”:“
多条声明：使用分号”;“隔开，最好每行都加上分号
注释：CSS使用 /**/，HTML注释则使用<!--内容--> 2. CSS样式分类：
1. 内联式
<p style="color:red;font-size:12px">这里文字是红色。</p>
2. 嵌入式
较通用的一类，CSS样式放置在<style>标签中，而<style>通常要放置在<head>内
<style type="text/css">
span{
color:blue;
font-size:12px;
}
</style>
3. 外部式
把CSS代码写到一个单独的外部文件中，以.css扩展名结尾，在<head>内使用<link>标签引入，如：
<link href="base.css" rel="stylesheet" type="text/css" />
href: .css文件路径
rel和type: rel="stylesheet" type="text/css" 是固定写法，不能改
三种方法的优先级：
内联式 > 嵌入式 > 外部式
就近原则，嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面
以上规则适用于相同权值的情况
3. CSS 类选择器
语法：
.类选器名称{css样式代码;}
举例：
<style type="text/css">
.stress{
color:red;
}
</style>
注意：前边的小圆点是必须要有的
使用：
<span class="stress">胆小如鼠</span>
4. CSS ID选择器
语法：
#ID选择器名称{css样式代码}
举例：
#setGreen{color:green;}
<span id="setGreen">胆小如鼠</span>
区别：
起始于 '.' 与 '#'
调用时 class= 与 id=
ID选择器只能在文档中使用一次，类选择器则可以使用多次
一个元素可以使用多个类选择器同时设置多个样式，而ID选择器是不可以的，如 <span class="stress bigsize">三年级</span>
5.CSS 子选择器
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。举例：
.food>li{border:1px solid red;}
若大于符号换成空格( ),用于选择指定标签元素的所有后辈元素，举例：
.first span{border:1px solid red;} 6. CSS 通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素：
* {color: red;}
此时，所有元素的字体都为红色 7. CSS 伪类选择符
伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover{color:red;}
此时，把鼠标放置到元素上边，颜色就会切换为红色 8. CSS 分组选择符
多个标签使用逗号隔开：
h1,span{color:red;}
相当于：
h1{color:red;}
span{color:red;} 9. CSS 继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代
如：
p{color:red;} /*可被span继承*/
p{border:1px solid red;} /*此时，span将不继承，边框显示红色*/ 10. CSS 特殊性（权值）
权值：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
层叠：
相同权值时，最后一个将被应用
重要性：
相同权值时，使用 !important 将得到最高权重，如 p{color:red!important;}
样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，使用 !important 优先级比 用户自己设定 还高 11. CSS 文字排版
1. 字体
body{font-family:"宋体";}
body{font-family:"Microsoft Yahei";}
2. 字号，颜色
body{font-size:12px;color:#666}
3. 粗体
p span{font-weight:bold;}
a{font-weight:bold;}
4. 斜体
p a{font-style:italic;}
p{font-style:italic;}
5. 下划线
p a{text-decoration:underline;}
6. 删除线
.oldPrice{text-decoration:line-through;}
7. 缩进
p{text-indent:2em;} /*2em 表示两倍文字大小*/
8. 行间距
p{line-height:1.5em;}
9. 字间距、字母间距
h1{letter-spacing:50px;word-spacing:50px;} /*分别是字母、单词间距*/
19.对齐
h1{text-align:center;} /*left、right和center*/ 12. CSS 元素分类
块状元素：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
内联元素：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
内联块状元素：
<img>、<input> 1. 块状元素：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
注意：a{display:block;} /*可以把内联元素 a 转换为 块状元素*/
2. 内联元素：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
注意：display:inline 可以转换成内联元素
3. 内联块状元素：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
注意：display:inline-block 可以转换成内联块状 13. CSS 盒模型
1. 边框
div{ border:2px solid red;}
相当于：
div{
border-width:2px;
border-style:solid;
border-color:red;
}
border-style: dashed（虚线）| dotted（点线）| solid（实线）
border-color:#888; //前面的井号不要忘掉。
border-width: 有 thin | medium | thick（但不是很常用），最常还是用象素（px）
2. 上下左右边框：
div{border-bottom:1px solid red;} /*top、bottom、left和right*/
3. 高度和宽度
div{
width:200px; /*宽度*/
height:30px; /*高度*/
padding:20px; /*元素到边框的距离，又名为“填充”*/
border:1px solid red;
margin:10px; /*两盒子距离，又名为“边界”*/
} 14. CSS 布局模型
元素有三种布局模型：
1、流动模型（Flow）
网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示
2、浮动模型 (Float)
现在我们想让两个块状元素并排显示
任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动
举例：
#div1{float:left;}
#div2{float:right;}
3、层模型（Layer）
就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧
层模型有三种形式：
1、绝对定位(position: absolute)
需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来
然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位
如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口
举例：
div{
xxxx:yyyy;
position:absolute;
right:100px;
top:20px;
}
2、相对定位(position: relative)
position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，
然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动
举例：
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
3、固定定位(position: fixed) 如弹窗广告
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身
它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，
因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响
举例：
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
Relative与Absolute组合使用：
1、参照定位的元素必须是相对定位元素的前辈元素
<div id="box1"><!--参照定位的元素（前辈）-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
2、参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了
#box2{
position:absolute;
top:20px;
left:30px;
} 15. 代码简写：
1. 盒模型：
margin:10px; 相当于 margin:10px 10px 10px 10px; （上右下左顺序）
margin:10px 40px; 相当于 margin:10px 40px 10px 40px; （上右 下左顺序）
padding, border和 margin是一致的；
2. 颜色值：
p{color:#000000;} 相当于 p{color: #000;}
p{color: #336699;} 相当于 p{color: #369;}
3. 字体：
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
编写为：
body{font:italic small-caps bold 12px/1.5em "宋体",sans-serif;}
注意：
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。 16. 长度值
1. 像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）
2. em
假定 font-size设定 14px，那么 1em=14px
3. 百分比
p{font-size:12px;line-height:130%}
HTML 基础 2的更多相关文章
- java基础集合经典训练题
第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...
- node-webkit 环境搭建与基础demo
首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Golang， 以17个简短代码片段，切底弄懂 channel 基础
(原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...
- [C#] C# 基础回顾 - 匿名方法
C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...
- HTTPS 互联网世界的安全基础
近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...
- Swift与C#的基础语法比较
背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...
- .NetCore MVC中的路由（1）路由配置基础
.NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...
- .NET基础拾遗（5）多线程开发基础
Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...
- .NET 基础 一步步 一幕幕[面向对象之方法、方法的重载、方法的重写、方法的递归]
方法.方法的重载.方法的重写.方法的递归 方法: 将一堆代码进行重用的一种机制. 语法: [访问修饰符] 返回类型 <方法名>(参数列表){ 方法主体: } 返回值类型:如果不需要写返回值 ...
随机推荐
- Ruby中，&:（ampersand colon）的用法
前几日看Ruby代码,发现一个奇怪的用法,如下: a=['a', 'b', 'c'].map! &:upcase p a #["A", "B", &qu ...
- ubuntu桌面环境配置及切换
修改ubuntu默认启动的桌面环境:Ubuntu是否启动图形化界面取决于default-display-manager的设置. vi /etc/X11/default-display-manager值 ...
- log4j2j配置
maven依赖 <properties> <sl4j.version>1.7.7</sl4j.version> <log4j2.version>2.1& ...
- 初探JS-html5移动端发送指定内容短信到指定号码
原理:利用a标签跳转指定网址: sms://[号码]?body=[内容] //安卓 sms://[号码]&body=[内容] //IOS 首先简单的做两个input,一个用于输入内容,一个用于 ...
- django配置
安装python环境后,安装pip工具 通过pip下载安装django pip install django django在web中的应用主要由两部分构成,工程与App 工程即相当于一下门户框架 ...
- linq读书笔记2-查询内存中的对象
上次我们说到了linq对数组内容的检索,自.net2.0以后,泛型成了很常见的一种应用技术,linq对泛型的检索也提供了完善的支持 如对list类型的支持,范例如下: class Program ...
- dojo.hasClass/dojo.addClass/dojo.removeClass/dojo.toggleClass/dojo.repalceClass
dojo.hasClass(/*DomNode*/node or DomIdstring,/*String*/classString)//如果节点中有特定的类,那么返回ture,否则返回false d ...
- PlSql复制角色、权限和添加角色权限
一.登录你想要复制数据库的用户
- js 函数（function）
<Javascript高级程序设计第三版> 3.7 函数 1. ECMAScript中的函数在定义时,不必指定是否返回值. 2. 位于return语句之后的任何code都永远不会执行.(之 ...
- Immediate Decodability(字典树)
Immediate Decodability Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/O ...