html、css学习笔记(三)

  • CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
  • css 样式由选择符声明组成,而声明又由属性组成。
  • 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。
  • 声明:在英文大括号“{}”中的的就是声明属性之间用英文冒号“”分隔(类似于键值对)。最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。
    当有多条声明时,中间可以英文分号“;”分隔,如下所示:
p{
   font-size:12px;
   color:red;
}
  • CSS中的注释语句:
用/*注释语句*/来标明(Html中使用<!--注释语句-->)。
  • 内联式css样式,直接写在现有的HTML标签中,注意要写在元素的开始标签里,并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。如以下代码:
<p style="color:red">这里文字是红色。</p>
  • 嵌入式css样式,写在当前的文件中。嵌入式css样式,就是可以把css样式代码写在<style type="text/css"></style>标签之间。嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。
  • 外部式css样式,写在单独的一个文件中。
  • 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:
<link href="base.css" rel="stylesheet" type="text/css" />

1、css样式文件名称以有意义的英文字母命名,如 main.css。
2、rel="stylesheet" type="text/css"是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内

  • 三种方法的优先级:内联式 > 嵌入式 > 外部式。但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。
  • 其实就是--就近原则离被设置元素越近优先级别越高)。
  • 每一条css样式声明(定义)由两部分组成,形式如下:
选择器{
    样式;
}
  • 标签选择器其实就是html代码中的标签
  • 类选择器
    1、英文圆点开头
    2、其中类选器名称可以任意起名(但不要起中文)
.类选器名称{
    css样式代码;
}
  • 使用方法:
    1、第一步:使用合适的标签把要修饰的内容标记起来;
    2、第二步:使用class="类选择器名称"为标签设置一个类
    3、第三步:设置类选器css样式
  • ID选择器
    1、为标签设置id="ID名称",而不是class="类名称"。
    2、ID选择符的前面是井号(#)号,而不是英文圆点(.)
  • 类和ID选择器的区别:相同点:可以应用于任何元素
    不同点:
    1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次
    2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
  • 子选择器:即大于符号(>),用于选择指定标签元素第一代子元素
  • 包含(后代)选择器:即加入空格,用于选择指定标签元素下的后辈元素
  • >作用于元素的第一代后代空格作用于元素的所有后代
  • 例如:.first span{ color:red; }
  • 通用选择器:作用是匹配html中所有标签元素,如:
* {color:red;}
  • 伪类选择符:允许给html不存在的标签(标签的某种状态)设置样式。现在比较常用的还是 a:hover 的组合。
  • 分组选择符:为html中多个标签元素设置同一个样式时,可以使用分组选择符(,)
  • 举个例子:
h1,span{color:red;}
等价于
h1{color:red;}
span{color:red;}
  • CSS的某些样式是具有继承性的。继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。但注意有一些css样式是不具有继承性的。如border:1px solid red;
  • 特殊性标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100
  • 举个例子:
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,所以可以理解为继承的权值最低
  • 浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。
  • 层叠:在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用,即后面的样式会覆盖前面的样式。
  • 重要性:有些特殊的情况需要为某些样式设置具有最高权值。注意:!important要写在分号的前面。
  • 样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式 < (!important)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,014评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,796评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,484评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,830评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,946评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,114评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,182评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,927评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,369评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,533评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,166评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2 351

推荐阅读更多精彩内容