seo彩虹之家

seo彩虹之家
seo.cpzswd.com
seo彩虹之家,seo技术,seo教程,seo培训

css快速入门技巧总结,小白css入门学习心得

更新时间:2019-12-24 22:07点击:

css好不好学呢?究竟该如何理解,入门的话应该从何学起。今天就在这里为大家总结下css的原理及其代码结构,css是如何美化页面的?其实掌握了书写css代码的技巧就很好理解了。

 


一、简介
    CSS(cascading style sheet)层叠样式表。html是用来展示数据,搭建页面的一个整体骨架的,而css就是用对html进行修饰的,对页面进行美化,HTML的属性也可以对数据内容进行修饰,但功能远不如css强大,css是专门用来做样式的语言,它的一个很明显的特点就是能够实现样式与html标签分离,并且能够重用。
    所谓层叠样式表,可以这样理解:就是对同一个元素,css可能在不同的地方都定义了属性,那这些属性如果有相同的该怎么办?那就用层叠,优先级高的放上面,有相同的属性就会被上面的属性覆盖,当然不同的属性就直接作用上去了。
    特点:
    1、Css语法:Selector{Property:value}选择器{属性:值},多个属性用分号“;”分开
    2、同一值如果有空格必须用引号引起来
    2、命名不要以数字开头

二、引入css的三种方式
    内嵌样式:在元素上标注style属性:style=“color:red”
    内部样式:在head标签内<style type=”text/css”>
</style>
    外部样式:引入外部的css文件:<link rel=”stylesheet” type=”text/css” href=”css的url”/>
    优先级:内嵌样式>内部样式>外部样式;还有一种:@import url ,但是不常用

三、css选择器
基本选择器:
    元素选择器:div{}
    Class选择器:.name{} class=””
    Id选择器:#name{} id=””
    优先级:id>class>元素
层叠选择器:
    div p span{}
    不留空格表示同时拥有这几个属性的元素:div.top.selected{}
属性选择器:
        div[name=”go”]{}
伪元素选择器
    a:link{color:green}没访问过的显示
    a:visited{color:yellow}访问过
    a:hover{color:black}鼠标放上去没点击
    a:active{color:red}点击时的显示
    (a标签记住顺序lvha)
组合选择器:
    h1,h2,h3{}

div+css盒子模型
    标签按是否独占一行可以分为块级标签和行内标签,div属于块级标签,无论div大小都会独占一行。

    在盒子模型中一切皆盒子,所有元素都可以看成是以上模型,蓝色是内容区域
    padding:内边距,也叫内填充,它是元素中可以展现内容的区域相对于边界的距离,即相当于排版中的留白,padding里面一般是没有内容的。padding值的设置可以单独设置:padding-left、padding-right、padding-top、padding-bottom,也可以简写如padding:1px 2px 3px 4px(顺序为顺时针:上右下左),三个值时如padding:1px 2px 3px;代表上1px、右2px、下3px、左2px,两个值时如padding:1px 2px代表上下1px、左右2px
    margin:外边距,即边界相对于父元素的距离;值的设置规律和padding一样
    border:边界或者边框;它的值也可以分开写或者简写,常用的简写方式border:1px solid red;代表边框宽1px,实线,红色
    盒子模型主要掌握几个属性
    float漂浮:left左漂、right右漂,漂浮元素会从当前文档流中抽出,漂浮在下一个元素上面,表现为漂浮元素覆盖当前元素,漂浮只相对于下一个元素而言,对其他元素无效。

        #div1{
            width:50px;
            height:50px;
            background:green;
            float:left;
        }
        #div2{
            width:100px;
            height:100px;
            background:red;
        }
        #div3{
            width:100px;
            height:100px;
            background:yellow;
            float:left;
        }
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3">漂浮只相对于下一个元素而言,对其它元素无效</div>

    clear:left/right/both清空漂浮,表示当前元素前面不允许有某种漂浮元素,both表示不允许有两者

    #div1{
            width:50px;
            height:50px;
            background:green;
            float:left;
        }
        #div2{
            width:100px;
            height:100px;
            background:red;
            clear:left;
        }
    <div id="div1"></div>
    <div id="div2"></div>

    box-sizing:此属性表示为盒子设置的width和height值是哪个值;content-box:内容盒子,这是默认值,表示设置的宽和高为中间可以写内容的区域,整个盒子的尺寸为设置值+padding+border+margin;border-box:边界盒子,表示设置的宽和高值为边界的大小,整个盒子的尺寸为设置值+margin

应用盒子模型布局例子
<!DOCTYPE html>
<html>
    <head>
        <title>css html</title>
        <style type="text/css">
            body{
            margin:0px;
            }
            #maincontent{
                width:100%;
                height:500px;
                /*margin:100px 0px 0px 200px;会将窗口整个向右下角平移,导致有一部分内容无法显示*/
                padding:100px 0px 0px 200px;
                border:1px solid yellow;
                box-sizing: border-box;/*默认为content-box盒子,尺寸是body的100+padding+border+margin  ; border-box尺寸:border以外+margin*/
            }
            #top{
                width:100%;
                height:100px;
                position:absolute;
                margin:-100px 0px 0px -200px;
                background-color:blue;
            }
            #left{
                width:200px;
                height:500px;
                position:absolute;
                margin-left:-200px;
                background:grey;
            }
        </style>
    </head>
    <body>
        <div id="maincontent">
            <div id="top"></div>
            <div id="left"></div>
        </div>

    </body>
</html>

官方微信公众号