[三]HTML+CSS基础(学习笔记)

一,CSS选择器的权重

问题的产生:在页面中使用CSS选择器选中元素时,经常都是一个元素同时被多个选择器选中。如果两个选择器设置的样式不一致那还好不会产突,但是如果两个选择器设置的是同一个样式,这样到底要应用哪个呢?CSS中会默认使用权重较大的样式,权重又是如何计算的呢?

权重的计算

  • 不同的选择器有不同的权重值:
  • 内联样式:权重是 1000
  • id选择器:权重是 100
  • 类、属性、伪类选择器:权重是 10
  • 元素选择器:权重是 1
  • 通配符:权重是 0
body, div{
    font-weight: bold;
}

div{
    font-weight: 700;
}

上面的div有三个class 切div也有权重 此时需要将权重相加
div中所有class的权重相加不会优先于上一级,即id选择器


二,HTML文本标签

1.

  • em标签用于表示一段内容中的着重点。语气上加重,通常显示为斜体
  • strong标签用于表示一个内容的重要性。显示为粗体
  • 这两个标签可以单独使用,也可以一起使用。
 

警告:任何情况下不要接近僵尸。 他们只是看起来 很友好,实际上他们是为了吃你的胳.

2.

  • i标签会使文字变成斜体。
  • b标签会使文字变成粗体。
  • 这两个标签和em和strong类似,但是这两个标签没有语义
  • 根据html5标准,当我们只想设置文本特殊显示,而不需要强调内容时就可以使用i和b标签。

3.

  • small标签表示细则一类的旁注,通常包括免责声明、注意事项、法律限制、版权信息等。
  • 浏览器在显示small标签时会显示一个比父元素小的字号。

©2016

4.

  • 使用cite标签可以指明对某内容的引用或参考。例如,戏剧、文章或图书的标题,歌曲、电影、照片或雕塑的名称等。

《夏目友人帐》是治愈系的动漫

5.

  • blockquote和q表示标记引用的文本。
  • blockquote用于长引用,q用于短引用。
  • 在两个标签中还可以使用cite属性来表示引用的地址。
孟子曾经说过: 
    
天将降大任于是人也...
他说的真对啊!

孔子曾经说过:学而时习之不亦说乎

6.

  • sup和sub用于定义上标和下标。

H2O

103

7.

  • ins表示插入的内容,显示时通常会加上下划线。
  • del表示删除的内容,显示时通常会加上删除线。

8.
 

  • 如果你的内容包含代码示例或文件名 ,就可以使用code元素。
  • pre元素表示的是预格式化文本,可以使用pre包住code来表示一段代码。
 
       
         function fun(){ 
            alert("hello"); 
         } 
       

9.无序列表和有序列表(块元素)

1.无序列表:使用ul和li来创建一个无序列表。通过type属性可以修改无序列表的项目符号

  • 列表项1
  • 列表项2
  • 列表项3
[三]HTML+CSS基础(学习笔记)_第1张图片
默认的.png

注意,默认的项目符号我们一般都是不使用的。如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置

2.无序列表:使用ol和li来创建一个有序列表。type属性可以指定序号的类型

 
  1. 列表项1
  2. 列表项2
  3. 列表项3
[三]HTML+CSS基础(学习笔记)_第2张图片
有序列表.png

列表之间可以相互嵌套的,可以在无序列表中放一个有序的,也可以在有序列表中放一个无序列表

10.定义列表,用来对一些词汇或内容进行定义

使用dl、dd、dt来创建一个定义列表。dt中是被定义的内容,dd中是对定义内容的描述

定义项1
定义描述1
定义项2
定义描述2
定义项3
定义描述3
[三]HTML+CSS基础(学习笔记)_第3张图片
定义列表.png

同样 dl ul ol之间可以相互嵌套


三,单位

长度单位:

  • 像素px:如果我们将一个图片放大的话,我们会发现一个图片是有一个一个的小色块构成的,这一个小色块就是一个像素,也就是1px ,对于不同的显示器来说一个像素的大小是不同的。 (是网页总使用最多的单位)
  • 百分比%:也可以使用一个百分数来表示一个大小,百分比是相对于父元素来说的,如果父元素使用的大小是16px ,则100%就是16px ,200%就是32px。好处是,当父元素发生变化时,子元素也会按照比例变化。在创建自适应的页面时,经常使用%作为单位。
  • ** em:**em和百分比类似,1em就相当于100% ,2em相当于200% ,1.5em相当于150%。1em = 1 font-size。相对于当前元素字体大小计算的,即当字体大小发生改变时,em也会随之改变
/* 此时width为40px */
    div{
        font-size: 20px;
        width: 2em;
    }


四,颜色值

1.在CSS中可以使用颜色单位来表示不同的颜色

aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。

2.也可以使用RGB值来标识不同的颜色

所谓的RGB值是通过red green blue三原色的不同浓度,表示出不同的颜色。可以使用0~255的数值,也可以使 用0%~100%的百分比数。
– RGB(100%,0%,0%)

– RGB(0,255,0) 
3.可以使用十六进制的rgb值来表示颜色

#6600FF实际上包含了三组十六进制的数字。66代表红色的浓度,00代表绿色的浓度,FF代表了蓝色的浓度。 00表示没有相当于rgb中的0,ff表示最大相当于rgb中的255。
如果每一组数中的两个数字都相同,就可以把 十六进制的数字缩短为只有3个字符,如将\ #6600FF缩短为#60F。


五,CSS字体

字体分类:
  • serif (衬线字体)
  • sans-serif (非衬线字体)
  • monospace (等宽字体)
  • cursive (草书字体)
  • fantasy (虚幻字体)
    以上这些分类都是一些大的分类,并没有涉及具体的类型,如果将字体指定为这些格式,浏览器会自己选择指定类型的字体即可以将字体设置为这些大的分类。一般会将字体大分类放在font-family最后一个字体。
/*不同浏览器处理有所区别*/

衬线字体:我是一段文字IABasdfghjkl

非衬线字体:我是一段文字IABasdfghjkl

等宽字体:我是一段文字IABasdfghjkl

草书字体:我是一段文字IABasdfghjkl

虚幻字体:我是一段文字IABasdfghjkl

[三]HTML+CSS基础(学习笔记)_第4张图片
字体分类(火狐).png
[三]HTML+CSS基础(学习笔记)_第5张图片
chrome.png
[三]HTML+CSS基础(学习笔记)_第6张图片
IE.png

1.设置字体的颜色,使用color来设置字体的颜色

color:red

2.设置字体的大小,font-size设置的并不是字体本身的大小,在页面中,每个文字都是处在一个看不见的框中的,设置的font-size,事实上设置的是格的高度,一般情况下,字比格小;有时也会变大

font-size:20px;

3.通过font-family可以指定标签中文字使用的字体。一般来说只有用户计算机中安装了我们指定的字体时,它才会显示,否则这行代码是没有意义的。font-family可以同时指定多个字体,当采用多个字体的时候,浏览器会优先使用前面的字体,如果前面没有则尝试下一个。在开发中,如果字体太奇怪,用的太少了,尽量不要使用

font-family:Arial
/*如果字体中间有空格  需要加引号*/
font-family:"curlz mt"

4.font-style用来指定文本的斜体。大部分浏览器不会对倾斜和斜体做区分,也就是说italic 和oblique他们的效果是一样的,一般 只会使用italic 。

font-style:italic ;

5.font-weight用来指定文本的粗体。该样式也可以指定100-900之间的9个值,但是由于用户的计算机中没有这么多级别的字体,所以100和200也可能是一样的。所以一般用normal和bold两个值

我是一段文字

6.font可以一次性同时设置多个字体的样式。**语法:font:加粗 斜体 小型大写 大小/行高 字体 。这里前边几个加粗、斜体和小型大写的顺序无所谓,也可以不写(不写则为默认值),但是大小和字体必须写且必须写到后两个。字体最后一个,大小倒数第二个。这样写 性能也会比较好


7.line-height用于设置行高,行高越大则行间距越大。文本默认在行中居中。***行间距 = line-height – font-size ***。

  • line-height可接收的值:
    • 指定一个百分数:如果其值是一个百分数,则会相对于字体去计算行高。100%则表示和字体大小一样大 。即行间距为0。line-height:100%
    • 直接接收一个大小: line-height:20px
  • 可以直接传一个 数值,则行高会设置为字体大小相应的倍数。line-height:1
[三]HTML+CSS基础(学习笔记)_第7张图片
行间距.png



    
    Document


    

这几天心里颇不宁静。今晚在院子里坐着乘凉,忽然想起日日走过的荷塘,在这满月的月光里,总该另有一番样子吧。月亮渐渐地升高了,墙外马路上孩子们的欢笑,已经听不见了;妻在屋里拍着闰儿,迷迷糊糊地哼着眠歌。我悄悄地披了大衫,带上门出去。   沿着荷塘,是一条曲折的小煤屑路。这是一条幽僻的路;白天也少人走,夜晚更加寂寞。荷塘四面,长着许多树,蓊蓊(wěng)郁郁的。路的一旁,是些杨柳,和一些不知道名字的树。没有月光的晚上,这路上阴森森的,有些怕人。今晚却很好,虽然月光也还是淡淡的。   路上只我一个人,背着手踱着。这一片天地好像是我的;我也像超出了平常的自己,到了另一世界里。我爱热闹,也爱冷静;爱群居,也爱独处。像今晚上,一个人在这苍茫的月下,什么都可以想,什么都可以不想,便觉是个自由的人。白天里一定要做的事,一定要说的话,现在都可不理。这是独处的妙处,我且受用这无边的荷香月色好了。   曲曲折折的荷塘上面,弥望的是田田的叶子。叶子出水很高,像亭亭的舞女的裙。层层的叶子中间,零星地点缀着些白花,有袅娜(niǎo,nuó)地开着的,有羞涩地打着朵儿的;正如一粒粒的明珠,又如碧天里的星星,又如刚出浴的美人。微风过处,送来缕缕清香,仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动,像闪电一般,霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着,这便宛然有了一道凝碧的波痕。叶子底下是脉脉(mò)的流水,遮住了,不能见一些颜色;而叶子却更见风致了。   月光如流水一般,静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样;又像笼着轻纱的梦。虽然是满月,天上却有一层淡淡的云,所以不能朗照;但我以为这恰是到了好处——酣眠固不可少,小睡也别有风味的。月光是隔了树照过来的,高处丛生的灌木,落下参差的斑驳的黑影,峭楞楞如鬼一般;弯弯的杨柳的稀疏的倩影,却又像是画在荷叶上。塘中的月色并不均匀;但光与影有着和谐的旋律,如梵婀(ē)玲(英语violin小提琴的译音)上奏着的名曲。   荷塘的四面,远远近近,高高低低都是树,而杨柳最多。这些树将一片荷塘重重围住;只在小路一旁,漏着几段空隙,像是特为月光留下的。树色一例是阴阴的,乍看像一团烟雾;但杨柳的丰姿,便在烟雾里也辨得出。树梢上隐隐约约的是一带远山,只有些大意罢了。树缝里也漏着一两点路灯光,没精打采的,是渴睡人的眼。这时候最热闹的,要数树上的蝉声与水里的蛙声;但热闹是他们的,我什么也没有。   忽然想起采莲的事情来了。采莲是江南的旧俗,似乎很早就有,而六朝时为盛;从诗歌里可以约略知道。采莲的是少年的女子,她们是荡着小船,唱着艳歌去的。采莲人不用说很多,还有看采莲的人。那是一个热闹的季节,也是一个风流的季节。梁元帝《采莲赋》里说得好:   于是妖童媛(yuán)女,荡舟心许;鷁(yì)首徐回,兼传羽杯;欋(zhào)将移而藻挂,船欲动而萍开。尔其纤腰束素,迁延顾步;夏始春余,叶嫩花初,恐沾裳而浅笑,畏倾船而敛裾(jū)。   可见当时嬉游的光景了。这真是有趣的事,可惜我们现在早已无福消受了。   于是又记起《西洲曲》里的句子:   采莲南塘秋,莲花过人头;低头弄莲子,莲子清如水。今晚若有采莲人,这儿的莲花也算得“过人头”了;只不见一些流水的影子,是不行的。这令我到底惦着江南了。   这样想着,猛一抬头,不觉已是自己的门前;轻轻地推门进去,什么声息也没有,妻已睡熟好久了。

[三]HTML+CSS基础(学习笔记)_第8张图片
未设置行高.png

[三]HTML+CSS基础(学习笔记)_第9张图片
设置行高.png
对于单行文本来说,可以将行高设置为和父元素的高度一致,这样可以是单行文本在父元素中垂直居中



    
    Document
    


    
不忘初心,方得始终

效果图:

[三]HTML+CSS基础(学习笔记)_第10张图片
result.png
在font中也可以指定行高。语法在第六点中已经包括了。记住是字体大小后面哦,该值是可选的。注意,line-height需要在font后面


6.CSS文本

1.text-transform样式用来设置文本的大小写。对中文无效

  • 可选值:
    • 大写:text-transform:uppercase
    • 小写:text-tansform:lowercase
    • 首字母大写:text-transform:capitalize通过空格来识别
    • 正常:text-transform:none


2.text-decoration属性,用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。超链接()会默认添加下划线,也就是说超链接的text-decoration的默认值为underline,如果需要去除下划线,需要给其设置为none

  • 可选值:
    • underline 为文本添加下划线
    • overline 为文本添加下划线
    • line-through 删除线
    • none


3.letter-spacing用来设置字符之间的间距。对中文也有效。可以直接指定一个长度或百分数作为值。正数代表的是增加距离,而负数代表减少距离。

[三]HTML+CSS基础(学习笔记)_第11张图片
默认效果.png
/*样式如下图*/
letter-sapce:10px;
[三]HTML+CSS基础(学习笔记)_第12张图片
为10px的样式.png


4.word-spacing用来设置单词之间的间距。对于中文来说意义不大,因为中卫一句话后面才会有空格,其他的都是连着写的。也可以直接指定一个长度或百分数作为值。正数代表的是增加距离,而负数代表减少距离。

/*效果如下图*/
word-sapcing: 20px;
[三]HTML+CSS基础(学习笔记)_第13张图片
英文显示效果.png
[三]HTML+CSS基础(学习笔记)_第14张图片
中文显示效果.png

5.text-align用于设置文本的对齐方式

  • 可选值:
    • left :左对齐
    • right :右对齐
    • justify :两边对齐 ,通过调整文本之间的距离来达到目的
    • center :居中对齐


6.text-indent用来设置首行缩进。 该样式需要指定一个长度,并且只对第一行生效。用像素进行所进是不靠谱的,用em,因为1em = 1个font。可以为负值——可以将一些不想显示的文字隐藏起来

text-indent : 2em

你可能感兴趣的:([三]HTML+CSS基础(学习笔记))