CSS笔记

一、什么是CSS
CSS全称层叠样式表,主要用于修改html标签的样式
二、CSS书写位置?
行内样式表:在标签的开始标签中使用style属性来书写该标签的样式属性
内部样式表:在head标签中使用style标签来描述样式,并且使用选择器将样式设置到某个或者某些标签之上,内部样式表解决了同一个页面中的样式重用问题
外部样式表:将css样式定义到一个css文件中,在html页面中可以通过引入该css文件来使用该文件中定义的样式,在css文件中书写样式不需要写style标签,在需要使用样式的html页面中使用link标签引入外部的css样式表,例如:

<link rel="stylesheet" href="css/style.css" />

本文配套练习代码，点击下载

三、选择器的分类

• 标签选择器:

    语法:标签名称{css样式属性}
    作用:对页面中所有的同种标签添加样式

• 类选择器:

    语法:.选择器名称{css样式属性}
    作用:将标签的class属性设置为类选择器名称,该标签就可以拥有类选择器的样式,
         标签的class属性可以同时设置多个选择器名称

• id选择器:

    语法:#选择器名称{css样式属性}
    作用:将标签的id属性设置为id选择器名称,该标签就可以拥有id选择器的样式
选择器优先级:id选择器>类选择器>标签选择器
属性筛选:在选择器后面可以使用[属性名称=属性值]筛选满足属性条件的这一部分标签,主要用于设置input标签的各种样式

• 复合选择器:

    语法:选择器1,选择器2,....{样式属性}
    作用:同时给多个选择器设置相同的样式

• 全局选择器:

    语法:*{样式属性}
    作用:给页面中所有的标签设置样式属性

• 层级选择器:

    语法:选择器A 选择器B...{样式属性}
    作用:在满足选择器A的条件的标签内部查找满足选择器B的条件的标签
四、css的常用样式

• 文字样式:

    font-family:字体属性
    color:字体颜色
    字体颜色可以用三种方式来表达。
    1.颜色对应的英文
    2.16进制的颜色
    3.RGB颜色 语法:color:rgb(数字,数字,数字)
    font-size:字体大小
    font-weight:设置文字的粗细
    font-style:设置文字风格(斜体)
    text-decoration:文本修饰(上划线，下划线，中划线)
    text-align:水平方向上的文字对齐(left，center，right)
    line-height:定义一行文字的高度,可以将行高设置为与高度相等实现文字垂直居中    的效果

• 列表属性:

    list-style:设置列表项修饰风格，通常设置为none去掉列表项的修饰

• 背景属性:

    background-color:背景颜色
    背景颜色可以用四种方式来表达。
    1.颜色对应的英文
    2.16进制的颜色
    3.RGB颜色 语法:color:rgb(数字,数字,数字)
    4.RGBA颜色 语法:background-color:rgba(数字,数字,数字,透明度0-1之间)
    background-image:背景图片 背景图片不会跟随标签的高宽进行缩放
    语法:background-image:url(图片地址)
    background-repeat:设置背景图片是否平铺已经平铺的方向
    可选值:repeat，no-repeat，repeat-x，repeat-y
    background-position:设置背景图片的位移
五、盒子模型
    任意一个标签在网页中都是以盒子模型来显示和布局的
    任何一个标签都会包含4个部分分别是内容、内边距、边框、外边距

•     调整内容的大小:

        height:调整内容的高度
        width:调整内容的宽度
        注意:只有块级标签能够直接调整内容的高宽,行级标签高宽是随着内容的大小随动的,不能直接调整,可以通过display="inline-block"属性将标签的        显示方式修改为行    级块,修改之后行级标签任然不会换行但是可以调整高宽

•     调整内边距的大小:

        padding:调整内边距的大小
        常见用法:
        padding:10px 将上右下左四个方向的的内边距都调整为10px
        padding:10px 5px 将上下内边距设置为10px 左右内边距设置为5px
        padding:10px 20px 30px 40px 依次将上右下左四个内边距进行设置
        
        padding-left:设置左内间距的大小
        padding-right:设置右内间距的大小
        padding-top:设置上内间距的大小
        padding-bottom:设置左内间距的大小

•     调整外边距的大小:

        margin:调整外边距的大小
        常见用法:
        margin:10px 将上右下左四个方向的外边距调整为10px
        margin:10px 5px 将上下外边距设置为10px 左右外边距设置为5px
        margin:10px 20px 30px 40px 依次将上右下左四个外边距进行设置

        margin-left:设置左外间距的大小
        margin-right:设置右外间距的大小
        margin-top:设置上外间距的大小
        margin-bottom:设置下外间距的大小

•     边框:

        border:调整4条边框大小、样式、颜色
        border-color:调整四条边框的颜色
        border-style:调整四条边框的样式
        border-width:调整四条边框的大小

        border-top:调整上边框的大小、样式、颜色
        border-top-color:调整上边框的颜色
        border-top-style:调整上边框的样式
        border-top-width:调整上边框的大小
    
        border-bottom:调整下边框的大小、样式、颜色
        border-bottom-color:调整下边框的颜色
        border-bottom-style:调整下边框的样式
        border-bottom-width:调整下边框的大小

        border-left:调整左边框的大小、样式、颜色
        border-left-color:调整左边框的颜色
        border-left-style:调整左边框的样式
        border-left-width:调整左边框的大小

        border-right:调整右边框的大小、样式、颜色
        border-right-color:调整右边框的颜色
        border-right-style:调整右边框的样式
        border-right-width:调整右边框的大小

• 定位属性:

    position:调整标签的定位方式
        可选的定位方式有:absolute(绝对定位) relative(相对定位) fixed(固定定位)

•     绝对定位:

        在设置position="absolute"之后,可以通过top,left,bottom,right4个属性来设置标签距离它的参照物        之间的间距
        绝对定位的标签会脱离文档流,意思是绝对定位的标签不会影响到其他标签的布局,其他标签不                会影响到绝对定位标签的布局
        绝对定位标签的参照物是上级的拥有绝对定位属性的标签,如果该标签的所有上级标签都没有绝对定位属        性,最终会使用body作为参照物
    

•     相对定位:

        在设置position="relative"之后,可以通过top,left,bottom,right4个属性来设置该标签相对于原本位            置产生的位移
        相对定位的标签不会脱离文档流,网页在对标签进行布局时,依然会将相对定位的标签计算在内,但是无论        相对定位的标签如何位移,布局始终是以标签的原位置进行计算的
    

•     固定定位:

        在设置position="fixed"之后,可以通过top,left,bottom,right4个属性来设置标签相对于浏览器窗口        的距离,无论网页如何滚动,标签始终会保持与浏览器窗体的距离不变
        固定定位会脱离文档流,不会影响其它标签的布局。

• 其它常用属性:
•     float:浮动属性 取消块级标签的换行

          给标签添加浮动属性之后有两个效果
          1.标签会上升到上面一级的水平面
          2.取消块级标签本身独占一行的特性

•     clear:取消浮动 clear标签取消左侧标签或者是右侧标签的浮动效果

         clear属性只能作用于标签本身
         clear属性可选值left、right、both作用是当前标签在布局时，不考虑左侧、右侧、左右浮动标签对自身的影响
         opacity:设置标签半透明度(包括背景和内容)
         display:可选值有 none、inline-block、block
         none 隐藏标签不会占据位置
         inline-block 行级块
         block 块级

•     visibility: 可选值 hidden、visible

         hidden 隐藏会占据标签的位置
         visivle 显示
         cursor:当鼠标移动到标签上时,改变鼠标指针样式
         overflow:针对于超出容器的内容的处理方式 可选值 auto、scroll、hidden

六、超链接的伪类样式

         超链接具有4种状态,link visited hover active
         超链接伪类样式可以用于设置超链接在这4种状态下各自的样式
    语法:
         选择器:link{}
         选择器:visited{}
         选择器:hover{}
         选择器:active{}
    4种伪类样式一定要按照上述顺序编写,如果不想改变某个状态的样式,可以缺省