您的位置:首页 > Web前端 > CSS

【从入门到放弃】WEB前端之HTML+CSS基础02

yanwydxf 2017-07-06 17:15 225 查看
上一篇中的标签都是我们拼页面的小砖块,所以都要收入框里,现在标签有了,开始CSS的表演吧



首先,什么是CSS?cascading style sheets    汉译层叠样式表,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息的显示样式。

通俗易懂的说,页面好不好看都由CSS来决定,CSS的学习我们可以按照进阶的步调来走

第一步:怎么创建CSS?CSS样式表创建的3种方式?

答:1. 内部样式 :通过<style></style>标签进行创建,编写在html页面的head当中

        2. 外部样式: 创建css文件,通过<link rel="stylesheet" type="text/css" href="main.css" /> 进行引入,当然还有第二种引入的方式@import url(main.css)  ,那么问题来了,我们该使用哪一个呢?以后更推荐link引入的方式,因为import的方式低版本浏览器不支持,而且在JS操作中,无法对它进行操作

        3. 内联(行内)样式:这个就比较亲民了,写法也很easy直接在标签内部添加style即可。<p style="" ></p>

       总结:以后实际开发中,更推荐的方式是外部样式 。 那么优先级呢?最高的是 内联样式-》内部/外部 看具体的书写顺序

第二步:知道CSS写在哪了,那具体的CSS要怎么写呢?

答:1. CSS语法: 选择符{  属性:属性值;属性:属性值;  } 注意分号不可丢

       

第三步:选择符是什么?有哪些呢?

答:1. 选择符的目的就是为了帮助我们找到页面上面的元素

        2. ID选择器:在html中给标签添加ID ,在CSS中通过  #ID名{  }  即可找到这个元素。注意#不可改,id不要重复(常用)

        3. Class选择符:在标签中添加class,css文件中通过 .class名称{  } ,可以多个标签都用同一个class,当然一个标签也能用多个class 通过空格分隔(常用)

        4. 通配符:* 一个星号,有了它页面上所有的标签都会生效这个样式,它一般用来设置字体字号的

        5. 标签选择器:html的标签名拿过来直接就是了,例如:p{  }  当然你这样写完之后,你页面上所有的p标签都会应用这个样式(常用)

        6.  群组选择符:单个样式已经不能够阻挡你了,那么多个怎么写呢,很简单,通过逗号分隔就OK ,例如:p,a,div{  } .div1,.p1,.a1{ }(常用)

        7. 后代选择符:当你想找到一个元素下的孩子们的时候,你会想到这个选择符,它的用法只需中间加一个空格,例如:div a{  } 这句的意思就是div下面所有的a都会应用你写的这个CSS样式,注意:空格不可少(常用)

        8. 子元素选择符:写法 div > a{  } 和后代的区别呢,很简单,子元素在家谱来说,就是只找到自己的孩子,孙子很明显不归它管

        9. 相邻兄弟选择器:div + a {  } 和div同级的a标签会生效样式,但是要求是必须是睡在上铺的兄弟,对面铺的都不行,必须要挨着div才行

       10.后续兄弟选择器:div~a{ } 这个只要是同级的都可以找到

第四步:选择符的优先级是个什么顺序?

答:CSS选择符有权重,如下:

       css中用四位数字表示权重,权重的表达方式如:0,0,0,0

       类型选择符的权重为0001

       class选择符的权重为0010

       id选择符的权重为0100

       子选择符的权重为0000

       属性选择符的权重为0010

       伪类选择符的权重为0010

       伪元素选择符的权重为0010

       包含选择符的权重:为包含选择符的权重之和

       内联样式的权重为1000

       继承样式的权重为0000

       从样式选择器看权重优先级:important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。

       还有一点,CSS选择符的权重,是计算的,比如你写了一个ID选择器和标签选择器,那么它的权重是把两个相加得到的结果

--------------------终于到了开始正式写CSS的地方了 噗 那上面都是什么,都是一群铺垫-----------------’

第一个:文本相关的样式

1. 文字大小 font-size   单位是px/em  注意;一般情况下PS量取字体的时候都是偶数

2. 文字颜色 color 有三种方式写颜色 red 单词  #ccccc 16进制的方式 rgb(255,255,1)

3. 字体 font-family 可以设置多个字体,逗号分隔,生效是看用户电脑上安装的字体,注意写字体加引号

4. 加粗:{font-weight:bolder(更粗的)/bold(加粗)/normal(常规)/100—900; but 600-900才能看出了加粗的效果

5. 倾斜:font-style:italic(倾斜度小)/oblique(倾斜度大)/normal(取消倾斜,常规显示);but 倾斜度小or大并看不出来

6. 水平对齐方式 text-align:left/right/center

7. 行高 { line-height:normal/value; } 行高小技巧,把行高和高度设置一样的,可以让元素内的内容垂直居中

8. 文本修饰:text-decoration:none/underline/overline/line-through

说明:

none:没有修饰

underline:添加下划线

overline:添加上划线

line-through:添加删除线

9. 都是font开头的,font的简写版:

说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)

顺序: font-style | font-weight | font-size / line-height | font-family

例如:font:bold italic 30px "微软雅黑"

10.首行缩进:{text-indent:value;} 那么值该是多少呢?如果你的字体大小是12px,想空两个格,那么就text-indent:24px; 当然你也发现了这样计算好烦,虽然并没有超过100,还有一种更简单的方式,换个单位,em ,1em=16px=100% 如果想空两个字,直接写text-indent:2em; 呦嚯嚯~

11.字间距{letter-spacing:value;}控制英文字母和汉字的字距。(英文字母和汉字)

12. 词间距{word-spacing:value;}控制英文单词词距。(通用于英文词和词之间的间距,)对中文不起效果

第二个:列表相关样式

1. 定义列表符号样式:list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号);

2. 定义列表符号的位置:list-style-position:outside(外边)/inside(里边);

3.使用图片作为列表符号:list-style-image:url(所使用图片的路径及全称);

第三个:背景相关样式

1. 背景颜色 语法:选择符{background-color:颜色值;}

2. 背景图片的设置  语法:background-image:url(背景图片的路径及全称);

了解下目前的图片格式撒:

1)jpg:有损压缩格式,靠损失图片本身的质量来减小图片的体积,适用于颜色丰富的图像;(像素点组成的,像素点越多会越清晰 )

2)gif:有损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,适用于颜色数量较少的图像;

3)png:有损压缩格式,损失图片的色彩数量来减小图片的体积,支持透明,不支持动画,是fireworks的 源文件格式,适用于颜色数量较少的图像;

4)WebP 在各大互联网公司已经使用得很多了 WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。但WebP是一种有损压缩。相较编码JPEG文件,编码同样质量的WebP文件需要占用更多的计算资源。

3. 背景图片平铺属性 语法:选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y }

4.背景图的固定
4000
语法:选择符{background-attachment:scroll(滚动)/fixed(固定);}

5.背景图片的位置 语法:选择符{background-position:left/center/right/数值     top/center/bottom/数值;}

两个值 :第一个值表示水平位置的值,第二个值:表示垂直的位置。

当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。
说明:向右方向,向下方向是负值

6. 背景属性缩写:background:属性值1   属性值2   属性值3;background:url(背景图片的路径及全称) no-repeat center top;

background的值的顺序是background-color,background-image,background-repeat,background-attachment,background-position

背景还有一个很重要的应用场景就是:雪碧图

background-position属性使用频率非常高,大量的网站为了减少http请求数,会将大量的图片图片合成一张雪碧图(Sprite)来使用。雪碧图的使用就是通过控制background-position属性值来确定图片呈现的位置,不得不说它的作用非常重要,当然除了在使用雪碧图的场景外,别的某些场景也常常会使用到这个属性。

下面来认识下CSS3新增内容

1. 属性选择器:语法 [att*=val] 属性值包含val 例:[class*=“div” ]  意思是class属性包含div字符

                            语法 [att^=val] 属性值以val开始 例:[class^=“div” ]  意思是class属性以div开头

                            语法 [att$=val] 属性值以val结尾 例:[class$=“div” ]  意思是class属性以div结束

2. 伪类选择器:找到第一个 li:first-child{  }

                            找到最后一个 li:last-child{  }

                            找到同级下的第n个 li:nth-child(n){  }

                            反向找到第n个 li:nth-last-child{  }

                            找到偶数 li:nth-child(even){  }

                            找到奇数 li:nth-child(odd){  }

3. 伪元素选择器:像选择元素的第一行文字使用样式 p:first-line {   }

                                像选择元素的第一个字符使用样式 p:first-letter {   }

                                在选择元素的之前添加新元素 p:before{   }

                                在选择元素的之后添加新元素 p:after{   }

总结一下:以上是一些基础的简单的CSS样式和我们CSS选择器,有了这些选择器可以帮助我们更好的去找到页面上的元素,通过这些我们可以简单的去还原一些小的效果,怎么样是不是感觉好复杂,人生就是这样起起落落落落落落落落落落...别担心,反正我也帮不了你
标签: