惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Simon Willison's Weblog
Simon Willison's Weblog
P
Privacy International News Feed
www.infosecurity-magazine.com
www.infosecurity-magazine.com
T
Troy Hunt's Blog
Hacker News - Newest:
Hacker News - Newest: "LLM"
Attack and Defense Labs
Attack and Defense Labs
S
Secure Thoughts
V2EX - 技术
V2EX - 技术
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
O
OpenAI News
Cloudbric
Cloudbric
Google Online Security Blog
Google Online Security Blog
Schneier on Security
Schneier on Security
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Help Net Security
Help Net Security
Cyberwarzone
Cyberwarzone
G
GRAHAM CLULEY
L
Lohrmann on Cybersecurity
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Spread Privacy
Spread Privacy
NISL@THU
NISL@THU
N
News and Events Feed by Topic
T
Tenable Blog
S
Security @ Cisco Blogs
N
News and Events Feed by Topic
The Hacker News
The Hacker News
C
CXSECURITY Database RSS Feed - CXSecurity.com
宝玉的分享
宝玉的分享
月光博客
月光博客
酷 壳 – CoolShell
酷 壳 – CoolShell
美团技术团队
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Google DeepMind News
Google DeepMind News
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
T
Tailwind CSS Blog
V
Visual Studio Blog
P
Proofpoint News Feed
Webroot Blog
Webroot Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
博客园 - 三生石上(FineUI控件)
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Jina AI
Jina AI
雷峰网
雷峰网
T
The Blog of Author Tim Ferriss
Hugging Face - Blog
Hugging Face - Blog
腾讯CDC
L
LangChain Blog
The Register - Security
The Register - Security
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 聂微东

博客园 - 耀眼冰蓝

我回来了,好久不见,博客园,10年前我写的心血,如今依然在,这种精神非常的棒! 欲找情人 要做哪些准备? 春运圣经:6大秘籍买到回家的火车票! 买了一个新的域名和主机,呵呵, 学的东西忘记得差不多啦...... 2007年10月份_很想念大家 NND,8月没有来发贴,现在是9月了,要发一个 7月又过去了,发篇文章,表示我还在,还活着,还惦记着博客园 6月份的最后一天 励志视频(财商):管道的故事 两个月没有写随笔了,感谢大家的关照!冒出来跟大家,表明我还活着.呵呵!! 很好的一首英文歌曲:不论是旋律、还是歌词或者MV JavaScript 经典代码大全:有 目录 及 编号 的哦 ! HTML语言:经典笔记 视频下载:HTML基础及应用 图片式笔记:多页面同步 笔记:不写一行代码,实现 DropDownList 和 GridView 联动 小练习:当输入一个总秒数时,将它转换为:X小时,X分,X秒的形式 ASP.NET——From验证:全部代码及讲解
CSS 实用笔记(代码详解)
耀眼冰蓝 · 2006-12-25 · via 博客园 - 耀眼冰蓝

刚总结了一点点,还有很好没有学到,以后将更新

相关文章:
HTML经典笔记



                                                   ●为什么用CSS;
                                                   ●CSS分类:按其位置可以分成三种;
                                                   ●CSS注释;
                                                   ●定义链接的样式
                                                   ●......

                                                   ●


●为什么用CSS:

 ·一组样式可以调用在多个对象上
·语法易学易懂(比HTML的语法还容易学,学了HTML之后,学CSS将非常容易)
·丰富的样式效果
·是 DHTML 的基础
·用css布局的一个好处是可以批量对页面进行修改,它能将文档结构和表现层分离开来,
    减轻工作量和服务器的负荷,增加站点的扩展能力和应用。
 
 ●什么是CSS
CSS的英文是Cascading Style Sheets,中文可以翻译成串联式样式表。


●CSS分类:按其位置可以分成三种


1、内嵌样式:

         内嵌样式是混合在HTML标记里使用的,用这种方法,可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值,如下例:
 

<style="color: sienna;margin-left: 20px;"> 
这是一个段落 
</p> 
<!--这个段落颜色为土黄,左边距为20象素--> 


         在style参数后面的引号里的内容相当于在样式表大括号里的内容。 
         注意:style参数可以应用于任意BODY内的元素(包括BODY本身),除了BASEFONT、PARAM和SCRIPT。
 
2、内部样式表这是         这是最典型的CSS的声明方式,但我 个人 认为:,影响页面的外观;
         内部样式表是把样式表放到页面的<head>区里,这些定义的样式就应用到页面中了,样式表是用<style>标记插入的,从下例中可以看出<style>标记的用法:

<head> 
…… 
<style type="text/css"> 
<!-- 
hr 
{color: sienna}
 
{margin-left: 20px}
 
body 
{background-image: url("images/back40.gif")}
 
--> 
</style> 
…… 
</head> 


         注意:有些低版本的浏览器不能识别style标记,这意味着低版本的浏览器会忽略style标记里的内容,并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生,我们用加HTML注释的方式(<!-- 注释 -->)隐藏内容而不让它显示:3、外部样式表:         调用外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head>区内,如下:
 

<head> 
…… 
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all"> 
…… 
</head> 


         上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。media是选择媒体类型,这些媒体包括:屏幕,纸张,语音合成设备,盲文阅读设备等。 

         一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时,所有页面的样式都随之而改变。在制作大量相同样式页面的网站时,非常有用,不仅减少了重复的工作量,而且有利于以后的修改、编辑,浏览时也减少了重复下载代码。



●CSS注释


          为了方便你自己或者他人日后更好地理解你的CSS代码,你可以写CSS代码注释。CSS代码注释以/*开头,以*/结束。

/* 定义段落样式表 */ 

{
 
text-align
: center; /* 文本居中排列 */
 
color
: black; /* 文字为黑色 */
 
font-family
: arial /* 字体为arial */
 
} 



1. 基本语法
 

         CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。 
         基本格式如下:

selector {property: value}       /*(选择符 {属性:值}) */


         选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE……,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开:

body {color: black} 


         选择符body是指页面主体部分,color是控制文字颜色的属性,black是颜色的值,此例的效果是使页面中的文字为黑色。 
         如果属性的值是多个单词组成,必须在值上加引号,比如字体的名称经常是几个单词的组合:
 

{font-family: "sans serif"}    /*(定义段落字体为sans serif)*/


         为了使你定义的样式表方便阅读,你可以采用分行的书写格式:


{
 
text-align
: center;
 
color
: black;
 
font-family
:
 arial 
}
 /*(段落排列居中,段落中文字为黑色,字体是arial)*/


2. 选择符组 (集体声明 和 分项声明方式)

         你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:

h1, h2, h3, h4, h5, h6 { color: green } /*(这个组里包括所有的标题元素,每个标题元素的文字都为绿色)*/ 

p, table

{ font-size: 9pt }
 /*(段落和表格里的文字尺寸为9号字)*/ /*效果完全等效于:*/ 

{ font-size: 9pt }
 
table 
{ font-size: 9pt } 


3. 类选择符 

         用类选择符你能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:

p.right {text-align: right} 
p.center 
{text-align: center} 


         然后用不在不同的段落里,只要在HTML标记里加入你定义的class参数:
 

<class="right"> 这个段落向右对齐的 
</p>
 <class="center"> 
这个段落是居中排列的 
</p>
 <class="right"> 这个段落向右对齐的 
</p>
 <class="center"> 
这个段落是居中排列的 
</p> 


         注意:类的名称可以是任意英文单词或以英文开头与数字的组合,一般以其功能和效果简要命名。 

         类选择符还有一种用法,在选择符中省略HTML标记名,这样可以把几个不同的元素定义成相同的样式:

.center {text-align: center} 


         (定义.center的类选择符为文字居中排列) 
         这样的类可以被应用到任何元素上。下面我们使h1元素(标题1)和p元素(段落)都归为“center”类,这使两个元素的样式都跟随“.center”这个类选择符:

<h1 class="center"> 
这个标题是居中排列的 
</h1>
 
<class="center">
 
这个段落也是居中排列的 
</p> 

         注意:这种省略HTML标记的类选择符是我们经后最常用的CSS方法,使用这种方法,我们可以很方便的在任意元素上套用预先定义好的类样式。
 
4. ID选择符

         在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式。 
         ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。将上例中类用ID替代:

<id="intro"> 
这个段落向右对齐 
</p> 

         定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同,定义ID选择符的属性也有两种方法。下面这个例子,ID属性将匹配所有id="intro"的元素:

#intro 
{ 
font-size
:110%; 
font-weight
:bold; 
color
:#0000ff; 
background-color
:transparent 
} 

         (字体尺寸为默认尺寸的110%;粗体;蓝色;背景颜色透明) 
         下面这个例子,ID属性只匹配id="intro"的段落元素:

p#intro 
{ 
font-size
:110%; 
font-weight
:bold; 
color
:#0000ff; 
background-color
:transparent 
} 

         注意:ID选择符局限性很大,只能单独定义某个元素的样式,一般只在特殊情况下使用。



●定义链接的样式


         CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:

a:link{font-size : 18pt ;text-decoration : none ;color : blue ;}
a:visited 
{font-size : 18pt;text-decoration : none ;color : brown ;}
a:hover 
{font-size : 24pt ;text-decoration : underline ;color : red;}
a:active 
{font-size : 24pt ;text-decoration : none ;color : green ;}


         以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。