CSS基础
- css 基础
- CSS 简介
- 样式层叠次序
- CSS 语法
- CSS 实例 1
- CSS规则
- CSS 颜色
- CSS注释
- CSS Id 和 Class 选择器
- id 选择器以 # 来定义
- class 选择器以 . 定义
- 元素选择器 –>标签名字
- CSS 创建
- 外部样式表
- 内部样式表
- 内联样式
- 多重样式
- 多重样式优先级顺序
- CSS Backgrounds
- 背景颜色
- 背景图像
- background-position
- 关键字
- 百分比
- 长度值
- CSS Text
- 文本的对齐方式
- 文本修饰
- 文本缩进
- 文本间隔
- 字母间距
- 文字阴影
- 文字方向
- 行间距
- 例子
- CSS Fonts
- serif 和sans-serif 字体之间的区别
- 字体系列
- 字体样式
- 字体大小
- 设置字体大小像素
- em 或者百分比设置大小
- 字体粗细
- width height
- CSS 链接（link）
- 链接样式
- CSS 列表样式（ul）
- 作用
- 例子：
- list-style-type
- CSS Table(表格)
- CSS box model (盒子模型)
- 元素的宽度和高度
- CSS Border (边框)
- 例子
- CSS outline （轮廓）
- CSS Margin(外边距)
- CSS Padding （填充）
- CSS 分组和嵌套
- 分组
- 嵌套
- CSS 尺寸
- CSS Display 和Visible
- 隐藏元素
- Display 块和内联元素
- CSS positioning(定位)
- 四种定位方法：
- Static 定位
- Fixed 定位（不随窗口动）
- Relative 定位（参照物为元素正常的位置）
- Absolute 定位（参照物为）
- 重叠的元素
- cursor
- overflow
- 四种定位方法：
- CSS Float(浮动)
- clear
- CSS Horizontal Align (块元素)
- 块元素对齐
- 中心对齐，margin
- position 属性设置左，右对齐
- float属性设置左，右对齐
- 块元素对齐
- CSS 组合选择符
-
- 后代选择器（ ）
- 子元素选择器（>）
- 相邻兄弟选择器（+）
- 普通兄弟选择器（~）
-
- CSS pseudo-classes(伪类) :
- 语法
- :first-child
- :lang
- :focus
- CSS 伪元素
- 语法
- :first-line
- :first-letter
- :before
- :after
- CSS 简介
css 基础
CSS 简介
css 指层叠样式表（Cascading Style Sheets）
样式通常存储在样式表中
外部样式表可以极大提高工作效率，它存储在CSS 文件中
多个样式定义可层叠为一
万维网联盟（W3C）在HTML4.0之外创造出样式（Style）
样式层叠次序
当同一个HTML 元素定义了多个样式时，一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，4拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（在
标签中） - 内联样式（在html元素内部）
CSS 语法
CSS 实例 1
<html>
<head>
<style>
body {backgroud-color:yellow;}
h1 {font-size:36pt;}
h2 {color:blue;}
p {margin-left:50px;}
style>
head>
<body>
<h1> This header is 36 pth1>
<h2> This header is blue h2>
<p> This paragraph has a left margin of 50 pixels p>
body>
html>
CSS规则
- css 规则由两个主要部分构成，以及一条或多条声明：
- 选择器通常是需要改变样式的HTML 元素
- 每条声明由一个属性和一个值组成
- 属性（property）是需要设置的样式属性，每一个属性有一个值，属性和值被冒号分开
- CSS声明总以分号（;）结束，声明组以大括号{}括起来
CSS 颜色
在描述颜色的时候，除了使用英文单词外，还可以使用十六进制的颜色值 #ff0000
p {color: #ff0000; }
为了节约字节，还可以使用CSS缩写形式
p { color: # f00;}
还可以使用RGB值，当值为0时，也要使用百分号符号
p{ color: rgb(255,0,0);} p{ color: rgb(100%, 0%, 0%);}
CSS注释
使用 /* */
CSS Id 和 Class 选择器
如果要在HTML 元素中设置CSS 样式， 需要在元素中设置id 和class 选择器
id 选择器以 # 来定义
ID 属性不以数字开头，
ID属性智能在每个HTML 文档中出现一次。
<html> <head> <meta charset="utf-8"> <style> #para1 { text-align:center; color:red; } style> head> <p id="para1"> hello world!!p> <p> This paragraph is not affected by the style.p> body> html>
class 选择器以 . 定义
CSS 中class 选择器可以在多个元素中使用
class选择器在HTML中以class 属性表示， CSS 中，类选择器以一个点 . 显示
<style>
.center
{
text-align:center;
}
style>
<h1 class ="center"> 标题居中h1>
<p class ="center"> 段落剧中p>也可以指定特定的HTML 元素使用class
所有的 p 元素使用class =”center” 让该元素的文本居中
<style>
p.center
{
text-align:center;
}
style>
<h1 class="center"> This heading will not be affectedh1>
<p class="center"> This paragraph will be center-aligned.p>元素选择器 –>标签名字
CSS 创建
插入样式表的方法有三种
- 外部样式表
- 北部样式表
- 内联样式
外部样式表
当样式需要应用多个页面时，，外部样式表是理想的选择。可以改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在头部：
不要再属性值与单位之间留有空格
内部样式表
可以使用
嵌套
<style>
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
color: yellow;
}
.marked p
{
color:white;
}
style>p 和marked 不一样
只用p标签， 是蓝色字体，居中。加 class=”marked” 背景红色， 白色字体。
CSS 尺寸
Dimension 属性允许控制元素的高度和宽度。也允许增加行间距
几个属性： height line-height max-height max-width min-height min-width width
CSS Display 和Visible
Display :显示 Visibility : 可见性
隐藏元素
display:none visibility:hidden ，不可见的元素仍然占用空间，不显示的元素不占用空间
<html>
<head>
<meta charset="utf-8">
<style>
h1.hidden {visibility:hidden;}
style>
head>
<body>
<h1>可见的h1>
<h1 class="hidden">不可见的h1>
<p>注意,隐藏标题仍然占用空间.p>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)title>
<style>
h1.hidden {display:none;}
style>
head>
<body>
<h1>This is a visible headingh1>
<h1 class="hidden">This is a hidden headingh1>
<p>注意,隐藏标题没有占用空间.p>
body>
html>Display 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符
内联元素只需要必要的宽度，不强制换行
可以将内联元素改为块元素
<html> <head> <style> li{display:inline} style> head> <body> <p>Display this link list as a horizontal menu:p> <ul> <li><a href="/html/" target="_blank">HTMLa>li> <li><a href="/css/" target="_blank">CSSa>li> <li><a href="/js/" target="_blank">JavaScripta>li> <li><a href="/xml/" target="_blank">XMLa>li> ul> body> html><html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)title> <style> span { display:block; } style> head> <body> <h2>Nirvanah2> <span>Record: MTV Unplugged in New Yorkspan> <span>Year: 1993span> <h2>Radioheadh2> <span>Record: OK Computerspan> <span>Year: 1997span> body> html>CSS positioning(定位)
允许将布局的一部分与另一部分重叠，还可以完成需要多个表格才能完成的任务。
四种定位方法：
Static 定位
HTML 元素的默认值，没有定位，元素出现在正常的流中，
静态定位元素不会受到top, bottom, left, right 影响
Fixed 定位（不随窗口动）
元素的位置相对于浏览器窗口是固定位置（窗口时滚动的，元素不会动）
Fixed 定位的元素会与其他元素重叠
Relative 定位（参照物为元素正常的位置）
相对定位元素的定位是相对其正常位置。
<style> h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } style>可以重叠
Absolute 定位（参照物为
）绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
可以重叠
重叠的元素
z-index 属性制定了一个一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或者负数的堆叠顺序
cursor
当鼠标移动到指定元素上方的时候，更改光标样式
<p>将鼠标移动到这些字上改变鼠标样式cursor.p> <span style="cursor:auto">autospan><br> <span style="cursor:crosshair">crosshairspan><br> <span style="cursor:default">defaultspan><br> <span style="cursor:e-resize">e-resizespan><br> <span style="cursor:help">helpspan><br> <span style="cursor:move">movespan><br> <span style="cursor:n-resize">n-resizespan><br> <span style="cursor:ne-resize">ne-resizespan><br> <span style="cursor:nw-resize">nw-resizespan><br> <span style="cursor:pointer">pointerspan><br> <span style="cursor:progress">progressspan><br> <span style="cursor:s-resize">s-resizespan><br> <span style="cursor:se-resize">se-resizespan><br> <span style="cursor:sw-resize">sw-resizespan><br> <span style="cursor:text">textspan><br> <span style="cursor:w-resize">w-resizespan><br> <span style="cursor:wait">waitspan><br>overflow
设置元素内溢出的内容如何显示
overflow有四个值 auto hidden scroll visible
auto 和scroll 差不懂，都是在垂直方向和水平方向上加上滚动条
hidden：不显示溢出的内容
<style> div .scroll { background-color:#00FFFF; width:100px; height:100px; overflow:scroll; } .hidden { background-color:#00FF00; width:100px; height:100px; overflow:hidden; } .auto { background-color:#00FFFF; width:150px; height:150px; overflow:auto; } style>CSS Float(浮动)
属性： float
定义元素在哪个方向浮动，浮动元素会生成一个块级框，知道该块级框的外边缘碰到包含框或者其他浮动框为止。
图片会在浮动在右边，因为是浮动的，图片的左边可以有文字
<style> div { float:right; width:120px; margin:0px 0px 10px 10px; padding:10px; border:1px solid yellow; text-align:center; } style> <div> <img src="/attachments/cover/cover_css.png" width="95" height="84" /><br> CSS is fun! div> <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. p>
图片水平布局
<style> .thumbnail { float:left; width:110px; height:90px; margin:5px; } style>
clear
指定段落左侧或者右侧不允许浮动的元素
<html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)title> <style> .thumbnail { float:left; width:110px; height:90px; margin:5px; } .text_line { clear:both; margin-bottom:2px; } style> head> <body> <h3>图片库h3> <p>试着调整窗口,看看当图片没有足够的空间会发生什么。.p> <img class="thumbnail" src="/statics/images/course/klematis_small.jpg" width="207" height="90"> <img class="thumbnail" src="/statics/images/course/klematis2_small.jpg" width="107" height="80"> <img class="thumbnail" src="/statics/images/course/klematis3_small.jpg" width="116" height="90"> <img class="thumbnail" src="/statics/images/course/klematis4_small.jpg" width="120" height="90"> <h3 class="text_line">第二行h3> <img class="thumbnail" src="/statics/images/course/klematis_small.jpg" width="107" height="90"> <img class="thumbnail" src="/statics/images/course/klematis2_small.jpg" width="107" height="80"> <img class="thumbnail" src="/statics/images/course/klematis3_small.jpg" width="116" height="90"> <img class="thumbnail" src="/statics/images/course/klematis4_small.jpg" width="120" height="90"> body> html>放段落的第一个字母浮动到左侧
<html> <head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)title> <style> span { float:left; width:1.0em; font-size:400%; font-family:algerian,courier; line-height:80%; } style> head> <body> <p> <span>这span>是一些文本。 这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 p> <p> 在上面的段落中, 第一个字嵌入在span 元素中。 这个 span 元素的宽度是当前字体大小的1.2倍。 这个 span 元素是当前字体的400%(相当大)， line-height 为80%。 文字的字体为"Algerian"。 p> body> html>
属性 描述 值 clear 指定不允许元素周围有浮动元素 left right both none inherit float 制定一个元素是否可以浮动 left right none inherit CSS Horizontal Align (块元素)
块元素对齐
中心对齐，margin
左右边距设置为“自动”对齐
.center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; }如果宽度是100%，对齐是没有效果的
position 属性设置左，右对齐
.right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; }float属性设置左，右对齐
.right { float:right; width:300px; background-color:#b0e0e6; }text-align 是设置元素内部的文字的对齐方式
CSS 组合选择符
CSS 组合选择符包括各种简单选择符的组合方式
- 后代选择器（空格）
- 子元素选择器（大于号）
- 相邻兄弟选择器（加号）
- 普通兄弟选择器（波浪号）
后代选择器（ ）
div p { background-color:yellow; }只要p 在div中，p中的内容就有效
子元素选择器（>）
child selectors
div p {background-color:yellow;}当p是div下面一层（子代）时，p中内容有效
相邻兄弟选择器（+）
adjacent sibling selector, 可以选择紧接在另一元素后的元素，且二者有相同的父元素，
选取 位于
后面的第一个元素：div+p { background-color:yellow }普通兄弟选择器（~）
选取所有指定元素的相邻兄弟元素
选取所有
元素之后的所有相邻兄弟元素div ~p {background-color:yellow; }CSS pseudo-classes(伪类) :
语法
selector: pseudo-class { property: value;}selector.class:pseudo-class {property:value;}用来添加一些选择器的特殊效果
由于状态的变化是非静态的,所以元素达到一个特定状态时，它可能得到一个伪类的样式，当状态改变时，它又会失去这个样式。它的功能与class 有点类似，但它是基于文档之外的抽象，所以叫伪类。
a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */:first-child
选择器匹配作为任何元素的第一个子元素的
元素p : first-child { color:blue;}匹配所有
元素的第一个元素p > i : first-child { color:blue; }匹配第一个第一个
元素中所有的元素p : first-child i { color: blue;}:lang
lang 类为属性值为no的q元素定义引号的类型：
<style> q:lang(no) {quotes: "~" "~";} style> <p>Some text <q lang="no">A quote in a paragraphq> Some text.p>:focus
<style> input:focus { background-color:yellow; } style> <form action="demo-form" method="get"> First name:<input type="text" name="fname" /><br/> Last name:<input type="text" name="lname" /><br/> Password: <input type="password" name="psw" /><br/> <input type="submit" value="Submit" /> form>CSS 伪元素
语法
selector: pseudo-element { property:value;}selector.class:pseudo-element { peoperty:value;}:first-line
对文本的首行设置特殊样式
对p元素的第一行文本进行格式化
:first-letter
向文本的首字母设置特殊样式
<style> p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; } style> <p>wenzip>:before
在元素的内容前面插入新内容
在每个
元素前面插入一副图片h1: before { content:url(/statics/images/course/smiley.gif); }:after
在元素的内容之后插入新内容
在每个
元素后面插入一副图片h1:after { content:url(http://www.w3cschool.cn/statics/images/course/smiley.gif); }选择器 示例 实例说明 :link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 :active a:active 选择正在活动链接 :hover a:hover 把鼠标放在链接上的状态 :focus input:focus 选择元素输入后具有焦点 :first-letter p:first-letter 选择每个 元素的第一个字母:first-line p:first-line 选择每个 元素的第一行:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 元素:before P:before 在每个 元素之前插入内容:after P:after 在每个 元素之后插入内容:lang p:lang 在 元素的lang 属性选择一个开始值