HTML-四-css
日期：2014-05-17 浏览次数：20591 次
HTML-4-css
0301 css
网页设计者曾经对控制 网页元素非常苦恼
CSS诞生了
代码重用了
不要记什么,了解一下,然后IDE给你记忆
用VS,鼠标放 body 里
然后到 属性 窗口
点style ...
就可以看见'样式生成器'了
自动提示也不错哦
设置CSS的几个方法
★1
inline styles[内联样式表]
就是直接设置 元素的 style 属性
最新标准说,如果要这样设置,最好在
head里加
<meta http-equiv="Content-Style-Type"
content="text/css"/>
因为text/xsl也可以 修饰 XML了
inline styles这个缺点就是 输出什么屏幕 打印机
乱七八糟的时候,没有办法把CSS去掉,写死了!
写到其他地方么可以用
media [指定此网页输出到什么 煤体上 才用你的资源]
计算机屏幕
打印机
screen[默认] print projection aural braille[xiazi] tty tv all
过滤一下!!!!
★2
[潜入样式表][缺点就是没有办法用到整个网站,不是单张网页]
现在来了,可以解决上面的不足了
<head>
<style type="text/css" media="screen,projection">
<!--
P {....}
-->
</style>
说明:这里的样式只有此文档输出到screen,projection才有用
注释是怕老的 IE,把你写的样式 统统 输出来,呵呵
但是它看得懂注释,呵呵,
JS也是同样道理
CSS基本规则:
selector {property:value;property:value;.....}
如果某个属性有多个值 有空格 隔开
有三种选择器:
1.html tag
2. class
3. id
★3
[外部样式表]*.css
<html>
<head>
<link rel="stylesheet" href="tt.css" type="text/css" media="screen">
</head>
<body>
<p>ddd</p>
</body>
</html>
★4
[输入样式表]
@import
把一个CSS 输入到 另一个CSS
也可以把CSS输入到<style></style>里
e.g.
<style type="text/css" media="screen,projection">
<!--
@import url(http://www.ss.com/style.css);
@import url(/fold/styl.css);
p{xxx:yyy;xx....}
-->
</style>
注意:@import 必在前
还可以自己定义
自己定义可以覆盖 import
===========================
0302 css
CSS设置
1
HTML selector
P {....} 这个就不多说了
---------------------------------
2
class selector [class的名字要根据 功能来起]
这个呢?要换一下概念了
class是类,
第一层意思是:某个 标签 的类[这个是初衷]
第二层意思是:同属一个类的 标签[这个是先入我脑的记忆]
文字上肯定理解不了,看个例子:
<p class="stop">paragraph1</p>
<p class="warning">paragraph2</p>
<p class="normal">paragraph3</p>
这就是一个标签 的三个类
<style>
p.stop {color:red;}
p.warning {color:yellow;}
p.normal {color:green;}
</style>
第二层意思
<style>
.blueone {color:blue;}
</style>
<h1 class="blueone">xxxx</h1>
<p class="blueone">xxxx</p>
-----------------------------------
3
ID selector
class是说一类,这个呢?是说某一特点的元素
用的不是很多,但是也有人非常喜欢用
ID在IT里都是指唯一的
例如:
<span id="yellowone" >text here</span>
<style>
<!--
#yellowone { color:yellow;}
-->
</style>
ID 选择器的经验:
只能为单个HTML标签元素设置样式规则,
因此有一定的局限性,在CSS里应该少用.
但是,JS和CSS-P[主要用里定位的]可以根据
ID来操纵和定位这个HTML元素,所以,
ID属性在JS里会广泛使用
什么时候用ID,什么时候用内联 样式呢??
---------------------------------------------
最主要的就是上面三类
还有三类不常用，了解一下好了
★关联选择器
看那个 类选择器的第一层意思!
对应的 第二层 叫 独立选择器!
这个还有情况:
p em {color:red;}
[ p em ] 就是关联选择器
就是说,出现在 p 里的em 会红色显示,其他地方em就不知道了
这个的优先权比单一选择器高![这话看不懂正常,看例子]
假如已经有上面的定义
再定义了
em {color:yellow;}
这个没有上面的厉害,出现在 p 里的em 会红色显示,其他地方em就应该是黄色的了
★组合选择器
这个非常简单
减少重复声明而已
h1,h2,h3,h4,h5,h6,td {color:red;}
逗号隔开!!
★伪元素选择器
这个是对同一个元素的各种状态和其所包含的部分内容的一种定义方式.
如:对于<a&
0301 css
网页设计者曾经对控制 网页元素非常苦恼
CSS诞生了
代码重用了
不要记什么,了解一下,然后IDE给你记忆
用VS,鼠标放 body 里
然后到 属性 窗口
点style ...
就可以看见'样式生成器'了
自动提示也不错哦
设置CSS的几个方法
★1
inline styles[内联样式表]
就是直接设置 元素的 style 属性
最新标准说,如果要这样设置,最好在
head里加
<meta http-equiv="Content-Style-Type"
content="text/css"/>
因为text/xsl也可以 修饰 XML了
inline styles这个缺点就是 输出什么屏幕 打印机
乱七八糟的时候,没有办法把CSS去掉,写死了!
写到其他地方么可以用
media [指定此网页输出到什么 煤体上 才用你的资源]
计算机屏幕
打印机
screen[默认] print projection aural braille[xiazi] tty tv all
过滤一下!!!!
★2
[潜入样式表][缺点就是没有办法用到整个网站,不是单张网页]
现在来了,可以解决上面的不足了
<head>
<style type="text/css" media="screen,projection">
<!--
P {....}
-->
</style>
说明:这里的样式只有此文档输出到screen,projection才有用
注释是怕老的 IE,把你写的样式 统统 输出来,呵呵
但是它看得懂注释,呵呵,
JS也是同样道理
CSS基本规则:
selector {property:value;property:value;.....}
如果某个属性有多个值 有空格 隔开
有三种选择器:
1.html tag
2. class
3. id
★3
[外部样式表]*.css
<html>
<head>
<link rel="stylesheet" href="tt.css" type="text/css" media="screen">
</head>
<body>
<p>ddd</p>
</body>
</html>
★4
[输入样式表]
@import
把一个CSS 输入到 另一个CSS
也可以把CSS输入到<style></style>里
e.g.
<style type="text/css" media="screen,projection">
<!--
@import url(http://www.ss.com/style.css);
@import url(/fold/styl.css);
p{xxx:yyy;xx....}
-->
</style>
注意:@import 必在前
还可以自己定义
自己定义可以覆盖 import
===========================
0302 css
CSS设置
1
HTML selector
P {....} 这个就不多说了
---------------------------------
2
class selector [class的名字要根据 功能来起]
这个呢?要换一下概念了
class是类,
第一层意思是:某个 标签 的类[这个是初衷]
第二层意思是:同属一个类的 标签[这个是先入我脑的记忆]
文字上肯定理解不了,看个例子:
<p class="stop">paragraph1</p>
<p class="warning">paragraph2</p>
<p class="normal">paragraph3</p>
这就是一个标签 的三个类
<style>
p.stop {color:red;}
p.warning {color:yellow;}
p.normal {color:green;}
</style>
第二层意思
<style>
.blueone {color:blue;}
</style>
<h1 class="blueone">xxxx</h1>
<p class="blueone">xxxx</p>
-----------------------------------
3
ID selector
class是说一类,这个呢?是说某一特点的元素
用的不是很多,但是也有人非常喜欢用
ID在IT里都是指唯一的
例如:
<span id="yellowone" >text here</span>
<style>
<!--
#yellowone { color:yellow;}
-->
</style>
ID 选择器的经验:
只能为单个HTML标签元素设置样式规则,
因此有一定的局限性,在CSS里应该少用.
但是,JS和CSS-P[主要用里定位的]可以根据
ID来操纵和定位这个HTML元素,所以,
ID属性在JS里会广泛使用
什么时候用ID,什么时候用内联 样式呢??
---------------------------------------------
最主要的就是上面三类
还有三类不常用，了解一下好了
★关联选择器
看那个 类选择器的第一层意思!
对应的 第二层 叫 独立选择器!
这个还有情况:
p em {color:red;}
[ p em ] 就是关联选择器
就是说,出现在 p 里的em 会红色显示,其他地方em就不知道了
这个的优先权比单一选择器高![这话看不懂正常,看例子]
假如已经有上面的定义
再定义了
em {color:yellow;}
这个没有上面的厉害,出现在 p 里的em 会红色显示,其他地方em就应该是黄色的了
★组合选择器
这个非常简单
减少重复声明而已
h1,h2,h3,h4,h5,h6,td {color:red;}
逗号隔开!!
★伪元素选择器
这个是对同一个元素的各种状态和其所包含的部分内容的一种定义方式.
如:对于<a&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
