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

CSS基础要点概况

时间:2015-12-05 14:20:51      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:

1、CSS概述

1)css指层叠样式表

2)样式定义如何显示HTML元素

3)样式通常存储在样式表中

4)把样式添加到HTML4.0中,是为了解决内容与表现分离的问题

5)外部样式表可以极大提高工作效率,外部样式表通常存储在css文件中

6)多个样式定义可层叠为一(相同的覆盖,不同的合一)

2、CSS可以做什么

a)网页效果(图片/字体/布局)

  1)浏览器缺省设置

  2)外部样式表(位于CSS文件内部,与<head>引入)重用,统一风格。

  3)内部样式表(位于<head>标签内部的<style>)

  4)内联样式/行内样式(在HTML元素内部style属性)

  5)层叠为一:行内样式(最强)\外部样式与内部样式需要看声明的顺序

  6)W3C建议:外部样式->内部样式->行内样式

b)脚步编程(选择器)

3、CSS语法

css语法由三部分构成:选择器、属性、值

selector{property:value;property2:value2;}

CSS对大小写不敏感,建议全小写,样式之间使用英文;分号隔开,最后一个可以不使用分号。

4、CSS选择器

 

Html选择器:所用相同的html元素(全部)

 

Id选择器:唯一的,精确控制(唯一)

 

Class选择器:相同class的控制(范围控制,部分)

属性选择器

派生选择器(Extjs): 上下文(级\层)关系来定义样式

伪类选择器

混合选择器:多种选择器混合使用.

<!DOCTYPE>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8"/>
    <!--1.    外部样式
        相对路径:相对当前文件的路径-->
    <link rel="stylesheet" type="text/css" href="css/mystyle.css" />

    <!--2.内嵌样式/内部样式 00-ff  0-255-->
    <style  type="text/css">
    
        /*html选择器:*/
        p{
             font-size : 30px
        }
        /*id选择器:注意模块、表单组件的唯一Id*/
        #myId1{
            font-size : 50px
            color: red;
        }
        /*class选择器*/
        .myType{
            color: #885532;
        }
    
        /*派生选择器 元素间必须有空格*/
        li strong {
            font-style: italic;
            font-weight: normal;
        }
        /*混合选择器:选择器间不可以有空格*/
        div#sidebar {
            border: 1px dotted #000;
            padding: 100px;
        }
        /*属性选择器 不可以有空格*/
        /*input[name=""]*/
        
        /*伪类选择器:不可以有空格*/
        a:hover{
                font-size : 50px
        }

    </style>
</head>

<body>
    <a href="www.baidu.com">超链接</a>
    <div id="sidebar">Test div</div>
    <div>Test div2</div>
    <ol>
        <li>
            <strong>Hello World!</strong>
        </li>
    </ol>

    <hr/>
    <strong>Hello World!</strong>
    
    <p id="myId1">段落1</p>
    <p class="myType">段落2</p>
    <p >段落3</p>
    <p class="myType">段落4</p>
    <p>段落5</p>
    <p class="myType">段落6</p>
    
    <!--3.行内样式-->
    <p style="font-size : 50px">行内样式</p>
    

</body>
</html>

 

5、CSS优先级

声明的顺序:行内》内嵌》外部

选择器:id选择器》class选择器》html选择器

<!DOCTYPE>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8"/>


    <!--2.内嵌样式/内部样式 00-ff  0-255-->
    <style type="text/css">
    
        /*html选择器:*/
        p{
             color: blue;
        }
        /*class选择器*/
        .myType{
            color: green;
        }
        
        /*id选择器:注意模块、表单组件的唯一Id*/
        #myId1{
            font-size : 50px;
            color: red
        }
        /*优先级:
            声明的顺序:行内》内嵌》外部
            选择器:id选择器》class选择器》html选择器
        */
    </style>
</head>

<body>

    <p class="myType" id="myId1" >行内样式</p>
</body>
</html>

 

CSS基础要点概况

标签:

原文地址:http://www.cnblogs.com/humanxiaoman/p/5021435.html

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