一：CSS 概述

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一

二：存在方式

　　存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

　　语法：style = 'key1:value1;key2:value2;'

  • 在标签中使用 style='xx:xxx;'
  • 在页面中嵌入 < style type="text/css"> </style > 块
  • 引入外部css文件

三：选择器

　　1）标签选择器

　　　　div{ } 
　　　　<div > </div>

　　2）class选择器

　　　　.bd{ } 
　　　　<div class='bd'> </div>

　　3）id选择器

　　　　#idselect{ } 
　　　　<div id='idselect' > </div>

　　4）关联选择器

　　　　#idselect p{ } 
　　　　<div id='idselect' > <p> </p> </div>

　　5） 组合选择器

　　　　input,div,p{ }

　　6）属性选择器

　　　　input[type='text']{ width:100px; height:200px; }

　　　　PS:
 　　　　优先级，标签上style优先，编写顺序，就近原则

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #i1,#i2,#i3{

            background-color: red;

            height: 48px;

        }

        /*.c1{*/

            /*background-color: red;*/

            /*height: 48px;*/

        /*}*/

        div{

            background-color: blue;

            height: 48px;

        }

        span div{

            background-color: yellow;

            height: 48px;

        }

        .c1 div{

          background-color: yellow;

            height: 48px;

        }

        input[n="alex"]{

          background-color: yellow;

            height: 48px;

        }

    </style>

</head>

<body>

    <div style="background-color: #2459a2;height:48px">1</div>

    <span>

    <div id="i1">2</div>

        </span>

    <div class="c1">3</div>

    <div id="i1">3</div>

    <input type="text" n="alex">

    <input type="password">

</body>

</html>

css-概述和选择器的更多相关文章

  1. 一、CSS概述 二、CSS的选择器（认识） 三、CSS样式和属性（练习） 四、重构商城首页DIV+CSS(页面布局)（重点） 浮动/更改显示方式

    一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...

  2. Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

    Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...

  3. xhtml和css概述

    Xhtml和css概述 1.html的过渡到xhtml html与xhtml不是两种语言,它们是一种语言的不同阶段,有点类似于文言文和白话文之间的关系.因为网络技术的日新月异,html的不断改进,所以 ...

  4. CSS的总结(选择器,伪类等...)

    关于组合选择器可参考:http://www.cnblogs.com/starof/p/4453458.html 主要内容 CSS概述 CSS和HTML结合的四种方式 CSS样式优先级和代码规范 CSS ...

  5. 前端之css样式（选择器）。。。

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  6. 前端基础--css基本语法,选择器

    一.css概述 CSS(Cascading Style Sheet)层叠样式表,定义如何显示HTML元素,给HTML设置样式,让它更加美观.当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式 ...

  7. 前端基础之css样式（选择器）

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  8. 前端之css样式（选择器）

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  9. Web前端：1、HTML&CSS概述及结构

    万维网联盟(World Wide Web Consortium)简称W3C,专门为了定义网页相关的标准而成立,如网页中的HTML.CSS.DOM.HTTP.XML等标准. 根据W3C标准,一个网页主要 ...

  10. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

随机推荐

  1. Java虚拟机加载类

    Java虚拟机是如何加载Java类的 Java虚拟机加载Java类总共需要经过3步:加载-----链接-----初始化.Java语言的类型可以分为两大类:基本类型和引用类型.基本类型是有Java虚拟机 ...

  2. nodejs进程异常退出处理方法

    1. 捕获uncaughtException process.on('uncaughtException', function (err) { //打印出错误 console.log(err); // ...

  3. [POI2008] BLO

    link 试题分析 分两种情况考虑. 当此点不是割点是,答案是$2\times (n-1)$. 当是割点时,我们发现这个点把树分成了若干个联通块,只要两两相乘即可. #include<iostr ...

  4. 【组合数学】【P5216】DLS采花

    Description DLS 有 \(N\) 个花田,每个花田里有 \(a_i\) 朵花. DLS 喜欢稀奇古怪的花田,他希望重新排列花田,然后去采花. 但 DLS 采花又有一个癖好:他会从左往右采 ...

  5. C++调Python示例(转载)

    C++调Python,代码粘贴如下: #include <iostream> #include <Python.h> using namespace std; void Hel ...

  6. 特征选择实践---python

    作者:城东链接:https://www.zhihu.com/question/28641663/answer/110165221来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  7. Nginx反向代理websocket配置实例

    最近有一个需求,就是需要使用 nginx 反向代理 websocket,经过查找一番资料,目前已经测试通过,本文只做一个记录 复制代码 代码如下: 注: 看官方文档说 Nginx 在 1.3 以后的版 ...

  8. P3355 骑士共存问题

    P3355 骑士共存问题 题目描述 在一个 n*n (n <= 200)个方格的国际象棋棋盘上,马(骑士)可以攻击的棋盘方格如图所示.棋盘上某些方格设置了障碍,骑士不得进入 对于给定的 n*n ...

  9. 关于connect by 误区讲解，纯属个人心得和经验，有图有文字

    本博客是自己在学习和工作途中的积累与总结,仅供自己参考,也欢迎大家转载,转载时请注明出处. http://www.cnblogs.com/king-xg/p/6927541.html 如果觉得对您有帮 ...

  10. 关于ARGB_8888、ALPHA_8、ARGB_4444、RGB_565的理解

    关于ARGB_8888.ALPHA_8.ARGB_4444.RGB_565的理解 A:透明度 R:红色 G:绿 B:蓝 Bitmap.Config ARGB_4444:每个像素占四位,即A=4,R=4 ...