CSS的基础语法

css基本语法

选择器

首先可以直接在style中的设置格式的，但如果有多个相同标签，就需要使用到选择器来区分

例如：p标签和a标签等.

选择器可以分为两种，class=“ ”，id=“ ”，这二者之间的区别

1、一个HTML标签只能应用于一个ID选择器，而一个HTML标签可以应用于多个class选择器。

2、ID选择器在style中使用“ # ”开头，并且只能在单个元素使用，Class选择器是以“ . ”开头，可以多个元素应用中间用“ ，”隔开。

    <style type="text/css">
            p{
                color:yellow;font-size: 30px;
            }
            .p1{
                color:green
            }
            .p2{
                color: brown;
            }
            #h1{
                color:blue
            }
            *{
                color: blueviolet;
            }
        </style>
    <h1 id="h1" >标题</h1>
    <p class ="p1">
        导读：前一段时间爆火网络的“九转大肠”相信很多人记忆犹新，在某档厨艺比赛的节目中，选手在制作猪大肠的时候，保留了一部分“原汁原味”
    </p>
    <p class="p2">
        导读：前一段时间爆火网络的“九转大肠”相信很多人记忆犹新，在某档厨艺比赛的节目中，选手在制作猪大肠的时候，保留了一部分“原汁原味”
    </p>
    <p  class="p2">
        导读：前一段时间爆火网络的“九转大肠”相信很多人记忆犹新，在某档厨艺比赛的节目中，选手在制作猪大肠的时候，保留了一部分“原汁原味”
    </p>
    <p class="p1">
        导读：前一段时间爆火网络的“九转大肠”相信很多人记忆犹新，在某档厨艺比赛的节目中，选手在制作猪大肠的时候，保留了一部分“原汁原味”
    </p>
    <p>
        oooooooooooooooooooooooooooooooooooooo
    </p>

文本样式

我们可以在css中设置段落中文本的样式

color可以改变字体的颜色；

font-size可以改变文本字体的大小尺寸；

font-weight可以加粗字体且可以改变加粗的程度；

font-family可以改变文本的字体样式；

text-align可以使文本居中/左对齐/右对齐等；

text-decoration可以修饰文本；

line-height可以设置文本行高且如果与内容区的高度一致就可以使文字竖直居中；

lette-spacing可以设置文字间的间隔；

text-indent可以设置文本的首行缩进。

        <style type="text/css">
            .p1{
                color: #0000FF;
                font-size: 20px;
                font-weight: 300px;/*加粗*/
                font-family: 楷书; /*字体*/
                /* text-align: center;居中 */
                /* text-decoration: underline;文本修饰_加下划线 */
                /* text-decoration: line-through;文本修饰-删除线 */
                /* font-style: italic; */
                /* line-height: 50px; *//*px是像素单位,文本行高 */
                /* letter-spacing: 20px;文字间的间隔 */
                text-indent: 2em;/*首行缩进,em表示当前文本中一个字符的大小*/
                }
                a{
                    text-decoration: none;/*取消所有修饰*/
                }
    </style>
        <p class ="p1">
            导读：前一段时间爆火网络的“九转大肠”相信很多人记忆犹新，在某档厨艺比赛的节目中，选手在制作猪大肠的时候，保留了一部分“原汁原味”
        </p>
        <a href="">百度</a>

伪类

hover:当鼠标移动到标签上时,切换到此样式表

active:当鼠标点击标签时,切换到此样式表

focus:当鼠标聚焦到可以输入的标签时,切换到此

<style type="text/css">
            a{
                text-decoration:none;
                color: black;
            }
            a:hover{
                color: #0000FF;
                text-decoration: underline;
            }
            a:active{
                color: #8A2BE2;
            }
            .p1:hover{
                background-color: #000000;
                color: aliceblue;
            }
            input:focus{
                background-color:red;
            }
        </style>
        <p class ="p1">
        导读：前一段时间爆火网络的“九转大肠”相信很
        </p>
        <a href="">百度</a>
        <a href="">百度</a>
        <a href="">百度</a><br />
        <input type="text" class="input" />
​

透明度

标签默认是不透明的

opacity:(标签透明度,0-完全透明,1-完全不透明）

标签分类

块级标签:无论内容有多少,都会独占一行,默认宽与浏览器或者与父标签一致 ,默认的高,如果没有内容,高度为0,与内容高度一致,块级可以设置宽和高(主要用来布局网页).

行级标签:只占自身内容大小,不会占一行,不能设置宽和高,设置了也是无效的.(主要用来包裹(选中)文字内容,对文字内容进行修饰)

行级块标签:可以设置宽和高,不占一行(img,input)

display:block;把行级标签变成了块级标签

display:inline ;把块级标签变成了行级标签

display:none;让标签隐藏

div标签

一些标签有自己默认的样式,会影响到网页布局

div是一个块标签,可以包含任何标签.

没有任何任何的附加功能,设置什么属性,就是什么样子.

是一个纯净版的块级标签.

用div标签来进行网页布局

span标签

纯净版的行级标签.

没有任何附加的功能,主要用来包裹,修饰文字用的

<标签></标签> 闭合标签

<标签名/> 自闭和标签

有的标签可以自动换行:标题标签,段落标签

有的标签不能自动换行:b,a,input

盒子模型

内容区

就是标签中放内容的区域

width和height只是设置内容区的大小,并不是标签的大小

标签的大小=内容区+内边距+边框

内边距

就是标签内容与边框以内的空间

使用padding来设置上下左右的内边距

边框

边框是标签可见框最外部

可以设置边框的颜色,大小,样式

外边距

外边距是标签边框与周围标签相距的空间，与内边距用法类似

外边距不会影响盒子的整体大小，但是会影响盒子的位置，影响盒子的实际控制范围。

文档流

文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分成一行行 ，并在每行中按从左至右的顺序排放标签，即为文档流。

也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继 续从左至右摆放。

这样一来每一个块标签都会另起一行，那么我们如果想在文档 流中进行布局就会变得比较麻烦。

浮动

指的是当前标签脱离原来的文档流，在父标签中浮动起来。浮动使用的是float属性有三个可选项：none不浮动，left左浮动，right右浮动。

块级标签和行级标签都可以浮动，当一个行级标签浮动以后将会自动变为一 个块级标签。当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签时我们 都会为其指定一个宽度。

当一个标签浮动以后，其下方的标签会上移。

浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮动以后即完全脱离文档流，这时不会再影响父标签的高度。也就是浮动标签不会撑开父标签。

消除浮动的影响

在浮动后当前标签已经脱离了原本的文档流，下方的标签会上移，然而clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。

<style type="text/css">
        .f2{
            width: 600px;
            margin: auto;
        }
        .f1{
                width: 120px;
                float: left;
                text-align: center;
                background-color: #008000;
            }
            .f1:hover{
                background-color: #0000FF;
            }
            .f3,.f4,.f5{
                float: left;
            }
            .f3{
                background-color: #696969;
                width: 100px;
                height: 300px;
            }
            .f4{
                background-color: #8A2BE2;
                width: 400px;
                height: 300px;
            }
            .f5{
                background-color: #C81623;
                width: 100px;
                height: 300px;
            }
            .f6{
                width: 600px;
                height: 300px;
                margin: auto;
            }
            #f1{
                background-color: #7FFF00;
                height: 200px;
            }
        </style>
    <div class="f2">
    <div class="f1">首页</div>
    <div class="f1">公司介绍</div>
    <div class="f1">联系我们</div>
    <div class="f1">人事招聘</div>
    <div class="f1">地址</div>
    <div style="clear:left"></div>
    </div>
    <div class="f6">
        <div class="f3">left</div>
        <div class="f4">center`</div>
        <div class="f5">right</div>
        <div style="clear: left"></div>
        <div id="f1">bottom</div>
            
        </div>
    </div>
    <div></div>

定位

定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。

相对定位

当标签的position属性设置为relative时，则开启了标签的相对定位

1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化

2.相对定位是相对于标签在文档流中原来的位置进行定位

3.相对定位的标签不会脱离文档流

绝对定位

1.开启绝对定位，会使标签脱离文档流

2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化

3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签的绝对定位都会同时开启父标签的相对定位）

如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位

4.绝对定位会使标签提升一个层级

5.绝对定位会改变标签的性质，行级标签变成块标签