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基础要点概况的更多相关文章

  1. CORS基础要点：关于dataType、contentType、withCredentials

    事实上,面试时我喜欢问跨域,因为多数开发者都知道它并且常用,而我希望能从面试者的回答中知道他在这个问题的深入程度,进一步看看面试者研究问题的思维方式及钻研精神,然而确实难到了很多人,当然这也不是面试通 ...

  2. 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏

    [图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...

  3. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  4. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

  5. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  6. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  7. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

  8. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  9. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

随机推荐

  1. Hacker（12）----个人计算机安全防护策略

    了解了黑客的常用入侵方法,针对这些方法分别指定对应的防护策略不太现实,因此用户只能掌握个人计算机安全的常见防护策略,以确保计算机处在一个相对安全的环境中.常见个人计算机防护策略有:安装并及时升级杀毒软 ...

  2. SpringMvc学习-环境搭建

    最近在学习SpringMVC,首先来说说SpringMVC项目的搭建. 1.SpringMVC简介 spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级W ...

  3. MySQL主从同步、读写分离配置步骤

    现在使用的两台服务器已经安装了MySQL,全是rpm包装的,能正常使用. 为了避免不必要的麻烦,主从服务器MySQL版本尽量保持一致; 环境:192.168.0.1 (Master) 192.168. ...

  4. PHP学习笔记二十【静态方法】

    <?php //静态变量的基本用法 //1,在类中定义变量 //2.定义方式[访问修饰符]static 变量名 //3.访问方式self::$变量名 第二种方式,类名::$变量名 //4.在类外 ...

  5. （原）mkl的cblas_sgemm和cblas_dgemm

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5553336.html 参考网址: mkl-11.3.2-developer-reference-c_0 ...

  6. 通过yocto给p1010rdb定制linux，并启动linux

    一.通过yocto定制linux 1.安装yocto yocto只能在非root用户下编译,所以先新建一个用户. useradd chen  passwd -d chen 重启电脑进入chen用户. ...

  7. 动态PDF在线预览

    实战动态PDF在线预览及带签名的PDF文件转换 开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是 ...

  8. Eclipse 乱码解决方案（UTF8 -- GBK）

    UTF8 --> GBK;   GBK --> UTF8 eclipse的中文乱码问题,一般不外乎是由操作系统平台编码的不一致导致,如Linux中默认的中文字体编码问UTF8, 而Wind ...

  9. Log4j之properties配置文件详解

    Log4j由三个重要的组件构成:日志信息的优先级,日志信息的输出目的地,日志信息的输出格式.日志信息的优先级从高到低有ERROR.WARN. INFO.DEBUG,分别用来指定这条日志信息的重要程度: ...

  10. 如何清空android ListView控件的内容

    第一种方法: listView.setAdapter(null); 第二种方法: listAdapter.clear(); listAdapter.notifyDataSetChanged() ; 满 ...