码迷,mamicode.com
首页 > Web开发 > 详细

css基础语法

时间:2019-12-15 16:10:28      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:设置   col   doctype   自己的   red   charset   继承性   set   xxx   

CSS样式

定义:就是给网页中的内容设置样式:样式表、级联样式表、层叠样式表

书写代码的步骤:

1、css代码要写在style标签中

2、style标签放在head中间的最后位置(title标签的下面)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                /*px作为单位像素点*/
                div{width: 100px;height: 100px;background: red;}
            </style>
        </head>
        <body>
            <div>nihao</div>
        </body>
    </html>

注意:px是像素单位

标签选择器

选择器定义:在页面中查找元素、标签、标记的方法

标签选择器:只需要写要找的标签名字即可

例:h1{}

id选择器

给标签设置id属性,在css代码中使用#id属性值的方式来寻找页面中的元素、标签、标记

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                #div1{background: red;}
                #div2{background: green;}
                #div3{background: yellow;}
            </style>
        </head>
        <body>
            <div id="div1">我是div1</div>
            <div id="div2">我是div2</div>
            <div id="div3">我是div3</div>
        </body>
    </html>

注:id的命名规则,不允许使用数字开头、不允许使用中文、不允许使用除了中划线- 和下划线_

类选择器

给标签设置class属性,在css中设置 .class名字:

例:

    .div{}
    <div  class="mmm1 mmm2">XXX</div>

细节:

1、id命名不能冲突

2、id命名不能一个标签设置多个

3、class命名可以冲突

4、class命名还可以给一个标签设置多个

注意:不管是id还是class命名规则一致2

CSS特性

继承性:

给祖先元素设置的样式,可以继承给儿孙元素,如果儿孙元素有自己的样式,那么一定是听儿孙元素自己的(继承的样式,权重较低!)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                /*文字颜色:color*/
                /*继承性*/
                div{color: red;}
                span{color: yellow;}
                /*继承所占的权重较低,小标签可以执行,可以不执行*/
            </style>
        </head>
        <body>
            <div>
                <span>
                    hello
                </span>
            </div>

        </body>
    </html>
覆盖性:

先写的代码会被后写的代码覆盖,代码的运行是由上而下

注意:需要在在权重相同的前提

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                span{color: red;}
                span{color: yellow;}
            </style>
        </head>
        <body>
            <span>hello</span>
        </body>
    </html>

css基础语法

标签:设置   col   doctype   自己的   red   charset   继承性   set   xxx   

原文地址:https://www.cnblogs.com/justztz/p/12044374.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!