CSS基础

一  CSS显示模式

 

  1,标签级别

  CSS将HTML标签做了分类:文本级,容器级。

  文本级标签只能嵌套文字,图片等信息。常用的文本级标签包含:span,p,em,img等。

  容器级标签可以嵌套其他所有标签。常用的包含:div,ul,ol,table等所有结构化语义标签都是容器级,比如header,footer,nav,section等。

  

  2,元素分类

  CSS将所有HTML元素分为三大类:块级元素,行类元素,行内块级元素。

  块级元素:独占一行;如果没有设置宽度,将继承父元素的宽度;如果设置了宽高,将按照设置值显示。

  行内元素:在一行内共存。不能设置宽高(margin和padding依然可以使用)。默认按内容大小显示。

  行内块级:不会独占一行,但可以设置宽高。

  CSS对元素的这种分类,我们称之为显示模式。

  

  3,显示模式转换

  CSS使用display属性设置元素的显示模式。display属性可以是以下这些值:inline(行内),block(块级),inline-block(行内块级),flex(弹性盒子),inline-flex(行内弹性盒子)。

 

二  CSS选择器

  

  1,常用选择器

  a),通配符

    CSS使用(*)星号表示通配符选择器,选中所所有标签。

1 *{font-size:14px;}

  b),特别重要

    CSS可以在属性值后添加 !important 强调该属性,该属性一定会被应用到HTML元素上,不管是否还设置了其他样式。

1 p{color:red !important;}

  c),标签选择器

    直接使用HTML标签名作为选择器。

1 p{}/*选中所有p元素*/

  d),类选择器

    CSS使用(.)点表示类选择器。

1 .wrap{}/*选中所有class为wrap的元素*/

  e),id选择器

    CSS使用(#)井号表示id选择器。

1 #firstname{}/*选中id为firstname的元素*/

  f),后代选择器

    CSS使用( )空格表示后代选择器,左边表示父元素,右边表示后代元素。

1 div p{}/*选中div中的所有后代p*/

  g),子选择器

    CSS使用(>)大于表示自选择器,左边表示父元素,右边表示儿子元素。

1 div>p{}/*选中div中的所有儿子p*/

  h),兄弟选择器

    CSS使用(+)加号表示兄弟选择器。

1 div+p{}/*选中紧接在div之后的兄弟p元素*/

  i),属性选择器

    CSS使用([])表示属性选择器。

1 input[name]/*选中所有带有name属性的元素。*/
2 input[name='ren']/*选中所有name属性值为ren的元素。*/

  j),并列选择器

    上面的选择器直接连在一起,不使用任何符号隔开,即是CSS中的并列选择器。

1 div.wrap{}/*选中calss为wrap的p元素。*/

  h),组选择器

    上面的选择器使用逗号隔开,即是CSS中的组选择器。

1 p,.wrap,div,#firstname{}/*同时选中p、class为wrap、div、id为firstname的元素。*/

  i),伪类选择器

    伪类选择器的形式是:普通选择器+冒号+关键字,伪类用于修饰普通选择器,常用来设置普通选择器选中元素的特殊状态。

1 div:hover{}/*d用于设置div被鼠标滑过时的样式。*/
2 p:first-child{}/*选中在兄弟元素中作为第一个元素的p元素。*/

    CSS还有很多其他的伪类选择器,详情请参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

  j),伪元素选择器

    伪元素选择器的形式和伪类相似,不同点在于,它使用双冒号连接关键字。伪元素用来对普通选择器选中的元素的特殊部分单独设置样式。它会把该元素的一部分当做一个完整的元素看待,从而为其设置单独的样式。

1 p::first-line{}/*选中所有p元素的第一行文本。*/
2 p::before{}/*创建一个元素作为p的第一个子元素,该元素默认是行内元素,可以使用content属性添加内容。*/

    更多伪元素请参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements

  虽然W3C规范要求使用双冒号来表示伪元素,但大多数浏览器依然支持使用单冒号表示伪元素,为了不产生混淆,推荐大家使用双冒号,加以区分。

  

  2,CSS选择器权重

    !important:infinity。

    内联样式:1000。

    id选择器:100。

    class||属性||伪类:10。

    标签:1。

    通配符:0。

  请注意:权重值不是十进制数,很可能是256进制的。这意味着即使你使用11个calss属性选中一个元素,它的优先级还是不及一个id选择器。

  通常,我们并不需要通过权重计算来判断css选择器的优先级,按照以下方式就可以简单快速的判断:  

  !important > 内联样式 > id > (class || 属性选择器)> 标签 >通配符。

  只有在使用并列选择器时,才需要计算权重值来判定优先级,如果权重值一样,那么就按照谁写在后面谁优先级高的原则。

 

三  CSS属性

  

  1,文本类属性

    文本样式类:

常用属性 含义         可选值                                                    
font-style 字体样式 italic(斜体),normal(正常的,默认值)
font-size 字体尺寸 所有css支持的
font-family 字体类型 各种字体名称
font-weight 字体粗细 normal,100-900,bold(粗),bolder(更粗),lighter(细)
text-decoration 文本装饰 none(无),underline(下划线),overline(上划线),line-through(删除线)
color 文本颜色 rgb值,16进制值,颜色关键字(单词)
text-shadow 文本阴影 需要四个值:1,水平偏移量;2,垂直偏移量;3,模糊半径(0表示无阴影);4,阴影颜色
text-transform 文本转换 none(不转换),uppercase(转换为大写),lowercase(转换为小写),capitalize(首字母转换为大写),full-width(转换为全角)

 

    文本布局类:

常用属性 含义        可选值                                               
text-align 文本对齐方式 left(左对齐),right(右对齐),center(居中)
line-height 行高 所有css支持的
letter-spacing 字间距 所有css支持的
word-spacing 单词间距 所有css支持的
text-indent 首行缩进量 所有css支持的
text-overflow 溢出处理 clip(不显示截断内容,默认值),ellipsis(以省略号显示被截断内容,需要配合white-space:nowrap使用才有效)
white-space 空白和换行处理 normal(合并,可换行),nowrap(合并,不换行),pre(保留)

 

  2,盒子类属性

  display:设置盒子是否显示。

1 div{
2     display:none;/*完全隐藏,不占用空间*/
3     /*display:block;块级元素*/
4     /*display:inline;行内元素*/
5     /*display:inline-block;行内块级*/
6 }

  content:width和height,分别定义盒子内容区域的宽高。

1 p{
2     width:200px;
3     height:200px;
4 }

  padding:环绕在content区域之外的就是内边距(或者叫填充)。

1 p{
2     padding-top:10px;
3     padding-right:20px;
4     padding-bottom:30px;
5     padding-left:40px;
6     /*padding:10px 20px 30px 40px;简写方式,顺时针方向*/
7     /*padding:20px; 如果四周padding值相同,可这样简写*/
8 }

  border:环绕在padding和content区域之外的即是边框。

 1 p{
 2     border-width:5px;/*边框宽度*/
 3     border-style:solid;/*边框类型,solid实线,dotted圆点虚线,dashed虚线*/
 4     border-color:black;/*边框颜色*/
 5     /*border:5px solid black;简写方式*/
 6     /*单独设置某个方向边框的方式与padding类似*/
 7     /*border-top-color:red;也可以通过该方式单独设置某一边的单个属性*/
 8     border-radius:5px;/*四角的圆角*/
 9     /*圆角也是一个复合属性,你可以单独设置某一个,例如左上角的圆角:border-top-left-radius*/
10 }

  margin:元素最外层的包裹层就是margin区域。使用时请注意margin的折叠问题(塌陷),前一篇《CSS概述》中有详细介绍。

1 p{
2     margin:10px 20px 30px 40px;
3     /*margin设置方式同padding*/
4 }    

  CSS的两种盒子模型:标准盒模型,怪异盒模型。你可以使用box-sizing设置CSS以哪种模式解析元素。

1 div{
2     box-sizing:content-box;/*默认值,标准模型*/
3     /*box-sizing:border-box;怪异模型*/
4 }

  他们唯一的区别是:标准盒模型解析width,height属性为内容区域的宽高,怪异模型则解析为content+padding+border区域。

  

  3,内容溢出

  我们已经知道,CSS将所有元素解析为一个个盒子,并可以通过设置width和height属性规定盒子内容区的大小。那么,当内容过多,盒子大小不足以容纳这么多内容时,CSS是怎么处理的呢?实际上,CSS为了避免数据丢失(用户无法查看所有内容),会在超出设置的范围之外显示剩余内容,进而可能影响到其他元素的显示,这种现象我们称之为内容溢出。

  一般有两种情况会导致内容溢出,一种是子元素的尺寸大于父元素的尺寸,另一种是文本超出行内块级元素的尺寸。你可以通过设置父元素的overflow属性来控制CSS如何处理溢出的情况。

1 div{
2     overflow:hidden;/*隐藏超出部分*/
3     /*overflow:scroll;显示滚动条*/
4     /*overflow:scroll-x/scroll-y;仅上下或左右方向有滚动条*/
5     /*overflow:auto;一般交给浏览器决定*/
6 }

 

四  背景

  

  1,颜色

  背景是修饰HTML常用的方式,CSS中使用background属性设置背景属性。

1 p{
2     backrgound-color:orange;/*背景颜色*/
3 }

  

  2,图片

  除了可以设置背景颜色外,CSS还可以设置背景图片。

1 p{
2     backrgound-img:url('url');/*背景图片*/
3     background-repeat:no-repeat;/*不平铺(重复)*/
4     /*该属性还有几个可选值:repeat:水平垂直都平铺(默认值);repeat-x:只在x轴平铺;repeat-y:只在y轴平铺*/
5 }

  请注意,如果背景图像和颜色都被设置了,一般情况下图像会覆盖颜色。

  你还可以通过设置background-size来调整背景图片的尺寸,以适应网页的需要。

1 p{
2     background-size:100px 200px;/*指定具体尺寸*/
3     /*如果你不知道具体尺寸,那么你可以使用关键字,让浏览器帮你设置大小。
4   cover:保证图片的宽高比,放大图片以填满整个区域,可能导致图片部分内容溢出。
5   contain:保证图片不溢出,尽量填满整个区域,可能导致部分区域无法被图像覆盖。
*/ 6 }

  

  3,定位

  在图像不需要填满整个区域的时候,你可以使用background-position来定位图片,让其显示在你想要的位置,需要配合background-repeat:no-repeat使用。

  在学习如何定位之前,我们应该先了解一下CSS中的坐标系:

  

   坐标原点即盒子的左顶点,水平向右为x轴正方向,垂直向下为y轴正方向。

1 p{
2     background-img:url('url');
3     backrgound-repeat:no-repeat;
4     background-position:50px 50px;/*设置水平和垂直偏移量*/
5 }

  偏移量可以是正值,也可以是负值,单位可以使px,百分比,em,或者单位名词。

  

  4,关联

  通常,如果我们设置了背景图片,且网页内容较多,出现滚动条时,当我们滑动滚动条,背景图片也会随着网页一起滚动。如果你想让背景图片固定不动,即使滑动滚动条,也只是内容上下或左右移动,那么你可以通过设置背景与滚动条的关联方式来达到目的。

1 div{
2     background-img:url('url');
3     background-attachment:fixed;
4     /*另一个取值scroll是该属性的默认值,即图片随滚动条一起滚动*/
5 }

 

  5,简写

  如果你想一次设置多个背景相关的属性,其实你大可不必像上面那样。上面介绍的背景相关属性可以简写为:

1 /*background:颜色 图片 平铺方式 关联方式 定位*/
2 div{
3     background:red url('url') no-repeat fixed 50px 50px;
4 }

 

  6,渐变

  你一定在网页上见过渐变色,它是那么的炫酷,现在,你也可以通过css定义自己的渐变色了。

  使用linear-gradient()函数创建线性渐变。

  函数需要3个或多个参数,第一个表示渐变方向(可以是关键字或角度deg),第二个表示开始颜色,第三个表示结束颜色,如果在后面添加了更多的颜色,那么这些颜色都会在渐变过程中出现。

1 p{
2     background:linear-gradient(to right,red,blue);
3     /*创建一个从左到右的,从红色到蓝色的渐变*/
4 }
5 p{
6     background:linear-gradient(to bottom right,red,blue);
7     /*创建一个从左上角到右下角的,从红色到蓝色的渐变*/
8 }

  使用radial-gradient()函数创建径向渐变。

  函数需要3个或多个参数,第一个参数定义渐变的圆点,默认值为center,即元素的中心点,你也可以通过具体尺寸或关键字(top,right,bottom,left,center或他们的组合)指定其位置;第二个参数定义径向渐变的形状(circle(圆),ellipse(椭圆,默认值))和大小。然后是起止颜色,同线性渐变。你也可以给每个颜色后面添加一个百分比(用空格隔开),表示该颜色在整个渐变区域中的占比。

1 p{
2     background:radial-gradient(top center,circle,orange 70%,purple 30%);
3     /*定义一个以盒子上边缘中间点为圆点,橘色占70%,紫色占30%的圆形径向渐变。*/
4 }

  由于渐变在CSS3才被引入,所有现在各大浏览器对它的支持各不相同,并且语法也与标准语法有一定出入,在使用时请一定作重考虑他们的兼容性问题。更多渐变知识请参考https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients

 

posted @ 2019-09-30 11:48  任风来去匆匆  阅读(378)  评论(0编辑  收藏