首页 > 代码库 > 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)

这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)

系列知识点汇总

     这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)

     这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)

     这些HTML、CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作、构建表单)

     这些HTML、CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作、代码编写规则)

No5.文章段落

1.文字属性

    文字属性包含font-*和text-*两类。

 

2.基于font的属性

    (1)font-family:字体属性,多个字体之前用逗号隔开。如果第一个字体没找到,则依次找后面的字体。例如:

body {    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}

    (2)font-size:字体大小,单位包括pixels, em units, percentages, points。

    (3)font-style:字体样式,包括normal, italic, oblique, and inherit。经常用到normal和italic(斜体)。

    (4)font-variant: 大小写转换,包括:normal, small-caps, and inherit。一般都不会使用该属性。

    (5)font-weight: 设置字体权重,可以是关键字和数字,关键字包括normal, bold, bolder, lighter, and inherit。有效枚举数字:100, 200, 300, 400, 500, 600, 700, 800, and 900 。normal 对应400,bold对应700。

    (6)line-height: 设置两行间距,值可以为百分比%、相对倍数em、以及像素数字px。例如可设置line-height:150%,line-height: 1.5em,line-height: 24px。一般都使用em相对于font-size设置。

    (7)如何让文本内容垂直居中显示:可把line-height和height设置成同一值。例如:

.btn {    height: 22px;    line-height: 22px;}

    (8)font属性缩写方式:font:font-style, font-variant, font-weight, font-size, line-height, and font-family。font-size和line-height通过”/”分割,font-family通过“,”分割,其他属性通过空格分割。例如:

html {    font: italic small-caps bold 14px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;}

 

3.基于text的属性

    (1)text属性包括:decorate、indent、transform、space、align、shadow、transform等。

    (2)text-align: 包含的值有left, right, center, justify、inherit。

    (3)text-align和float区别:text-align设置元素中text的对齐方式,而float将设置整个元素的对齐方式。下面的div还是占一行空间,但文本内容居右显示。

div{    background: red;    text-align:right;}

    下面的div不会占用一行,div按自身内容设置大小,整个div居右显示。

div{    background: red;    float:right;}

    (4)text-decoraton: 设置文字装饰,值包括none、underline、overline(上划线)、line-through(中划线)、inherit。

    (5)text-shadow: 设置文本投影,包含4个值,text-shadow: 水平位移 垂直位移 文本模糊半径 投影颜色。例如:

p {    text-shadow: 3px 6px 2px rgba(0, 0, 0, .3);}

    (6)box-shadow和text-shadow区别:box-shadow用于设置整个盒子的投影,包含5个值:inset/outset 水平距离 垂直距离 模半径 颜色。例如:

div{    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);}

    (7)text-transform: 文字大小写转换,包含的值有none、capitalize、uppercase、lowercase、inherit。capitalize将每个单词首字母大写,uppercase将所有单词转换为大写,lowercase将所有单词转换为小写。例如:

p {    text-transform: uppercase;}

    (8)letter-spacing:设置每个字母之间的间距,下面设置p元素下的每个字母之前间距为基于font-size的-0.5倍。

p {    letter-spacing: -.5em;}

    (9)word-spacing: 设置每个单词之间的间距,和letter-spacing相似。

    (10)text-indent:设置第一行左面间距。例如下面设置第一行的左面文字到左边距的举例为15px。

.intro{    text-indent: 15px;}

4.自定义web字体

    (1)定义语法:下面代码定义了自定义字体,font-face设置字体参数,font-family为字体名称,src设置字体的网络路径。

@font-face {    font-family: "Lobster";    src: local("Lobster"), url("lobster.woff") format("woff");}

    (2)使用:和其他字体使用一样。例如下面代码吧自定义的字体”Lobster”设置为首选字体。

body {    font-family: "Lobster", "Comic Sans", cursive;}

    (3)字体资源:google上面有很多新的字体可供下载,地址为:https://www.google.com/fonts。

No6.设置背景

1.background

    (1)如何设置背景:背景可通过color、image、gradient渐变或者组合方法设置。

    (2)background-color:颜色格式可以是十六进制或者rgb以及rgba。为了保证兼容性,有些浏览器不支持rgba,需要在设置rgba之前添加一个十六进制设置。如下:

div {  background-color: #b2b2b2;  background-color: rgba(0, 0, 0, .3);}

    (3)background-image:通过添加背景图片来设置背景。例如:

div {  background-image: url("alert.png");}

    (4)background-repeat:设置图片重复形式,包含的值有repeat, repeat-x, repeat-y, and no-repeat,repeat是默认值,表示水平和垂直都重复。

    (5)background-position:把背景通过元素左上角的偏移位置定位背景显示位子。包含两个值,分别是水平和垂直的偏移值。下面的代表表示,元素的背景色从左上角开始向右偏移20个像素,向下偏移10个像素。

div {  background-image: url("alert.png");  background-position: 20px 10px;  background-repeat: no-repeat;}

    下面的代码表示水平偏移20个像素,垂直为默认的50%。

div{    background-position: 20px;}

    (6)background-position关键字参数:参数可为top、right、bottom、left、center关键字, pixels, percentages或者任意长度单位。关键字和百分比很相似,例如:left top(0, 0)、right top(100%, 0)、left bottom(0, 100%)、right bottom(100%, 100%)。

    (7)background缩写:缩写的属性顺序为background-color background-image background-position background-repeat。下面代码表示背景色为#b2b2b2,背景图片为url("alert.png"),position为水平偏移20像素、垂直偏移10像素,重复属性值为no-repeat。

    (8)多背景设置:多个背景图片设置通过“,”分隔,最前面的图片展示在最上面,最后的图片展示在最下边。如下代码所示:

div {    background: url("foreground.png") 0 0 no-repeat, url("middle-ground.png") 0 0 no-repeat, url("background.png") 0 0 no-repeat;}

2.线性渐变效果

    (1)linear-gradient函数:默认从top到bottom渐变,可以添加多个颜色。如下代码:

div {    background: #466368;    background: -webkit-linear-gradient(#648880, #293f50);    background: -moz-linear-gradient(#648880, #293f50);    background: linear-gradient(#648880, #293f50);}

    (2)兼容性:有些浏览器不支持渐变效果,一般都需要在最前头添加一个单色的背景,例如上面代码添加的background: #466368。

    (3)改变渐变方向:linear-gradient的第一个参数可改变方向,参数使用:to 方向。例如下面的代码让渐变从左上角渐变到右下角。

div {    background: #466368;    background: linear-gradient(to right bottom, #648880, #293f50);}

    (4)添加多个渐变颜色:linear-gradient方法可添加多个渐变颜色。参考代码如下:

linear-gradient(to right, #f6f1d3, #648880, #293f50);

    (5)渐变占比:可以设置渐变颜色在整个渐变隧道的占比,例如下面代码的第二个颜色占比85%。

div{    linear-gradient(to right, #f6f1d3, #648880 85%, #293f50);}

3.放射性渐变

    (1)radial-gradient:radial-gradient提供了反射性渐变函数,参数可接收多个颜色。

    (2)参数说明:第一个参数设置绝对中心位置的颜色,第二个参数设置最外层颜色,最终效果是从中心位置向外过度转换。

4.CSS3 背景新属性

    background-size: 设置背景相对于元素的大小,包含width和height两个值,值可以是数字或者关键字。例如下面设置元素的背景宽度自适应,高度占元素高度的75%。

div{    background-size: auto 75%;}

No7.数据列表

1.无序列表Unordered List

     无序列表用block-level元素ul(unordered list)表示,每个item单独使用li(list)标记。如下代码所示:

<ul>    <li>Orange</li>    <li>Green</li>    <li>Blue</li></ul>

2.有序列表Ordered List

    (1)和无序区别:无序的每一项默认使用”.”表示,而有序的项通过数字表示。

    (2)包含元素:有序列表是block-level级别,每个item单独使用li标记。如下代码所示:

<ol>    <li>Head north on N Halsted St</li>    <li>Turn right on W Diversey Pkwy</li>    <li>Turn left on N Orchard St</li></ol>

    (3)start属性:标记item开始的数字是从哪个值开始:<ol start="30">表示列表标记从30开始。

    (4)reversed属性:标记是否可以倒序,默认为false。如果设置<ol reversed>,原来是1,2,3,4,5现在变成5,4,3,2,1。

    (5)value属性:用在li上,标记li的序列,接下来的li都从这个标记数字往上加。例如:代码<li value="http://www.mamicode.com/9">Turn right on W Diversey Pkwy</li>后面的li标记都是9开始往上加。

3.嵌套列表

    (1)使用元素:一般使用ul和ol嵌套使用。如下代码所示:

<ol>    <li>Walk the dog</li>    <li>Fold laundry</li>    <li>        Go to the grocery and buy:    <ul>    <li>Milk</li>    <li>Bread</li>    <li>Cheese</li>    </ul>    </li>    <li>Mow the lawn</li>        <li>Make dinner</li></ol>

    (2)随着嵌套关系,列表元素的标记会发生变化,例如默认ul的标记四“.”,现在变成小方块。

4.列表样式

    (1)list-style-type:设置标记样式,下面的代码设置标记为一个正方形。

ul {    list-style-type: square;}

    (2)list-style-type包含的值具体如下:

“List Style Type Value”    “Content”none “No list item”disc “A filled circle ”circle “A hollow circle” square “A filled square” decimal “Decimal numbers” decimal-leading-zero “Decimal numbers padded by initial zeros” lower-roman “Lowercase roman numerals” upper-roman “Uppercase roman numerals” lower-greek “Lowercase classical Greek” lower-alpha / lower-latin “Lowercase ASCII letters” upper-alpha / upper-latin “Uppercase ASCII letters” armenian “Traditional Armenian numbering” georgian “Traditional Georgian numbering”

    (3)自定义标记:使用自定义图片设置marker,必须先设置list-style-type:none,然后设置li的background样式。如下代码设置标记为一个arrow图标,图标起始位置水平为0,垂直位置为元素li高度的50%处。

li {    background: url("arrow.png") 0 50% no-repeat;    list-style-type: none;    padding-left: 12px;}

    (4)list-style-position:设置标记的位置,包含值有outside、inside、inherit,默认为outside。

    (5)list样式简写:格式为list-style:list-style-type list-style-position,如下代码所示:

ul {    list-style: circle inside;}ol {    list-style: lower-roman;}

5.水平显示列表方法

    (1)设置display:通过设置li的display为inline或者inline-block,可水平显示列表。同时列表的标记被移出。如下代码所示:

HTML:<ul>    <li>Orange</li>     <li>Green</li>     <li>Blue</li></ul>CSS:li {    display: inline-block;     margin: 0 10px;}

    (2)设置float:display没有保留marker标记,通过float:left也可以水平显示并且保留了marker。但是必须设置margin排列li。如下代码设置float等于left,然后设置水平间距为20px。

li {    float: left;    margin: 0 20px;}

6.设置列表展现导航效果

    (1)一般导航我们可以给第一个和最后一个元素设置圆角,获取第一个和最后一个元素可通过CSS:li:first-child、li:last-child。

    (2)设置li的display:display: inline-block。

    (3)设置normal和和mouseover样式,如下代码所示:

.navigation a{    background: #95870;    background: linear-gradient(#49708f, #293f50);    border:1px solid rgba(0, 0, 0, 0.3);    color: #fff;    padding: 12px 20px;    text-decoration: none;}.navigation a:hover{    background: #314b60;    text-shadow: 0 10px 1px rgba(0, 0, 0, .3);}

    (4)设置ul字体和间距:直接看参考代码如下。

ul{    font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;     margin: 0;     padding: 0;    text-transform: uppercase;}

这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)