一：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. 2019PKU\THU WC题解

    PKU: 机试: d1t1: 考虑拓扑序的合法性,每个点的入边必须先加入.f[S]表示先出来的是S集合的点,对应边的方案数.加入x的时候,把入边方向确定,出边自然后面会确定的 2^n*n d1t2: ...

  2. python之旅：面向对象的程序设计

    一 面向对象的程序设计的由来 面向对象设计的由来见概述:http://www.cnblogs.com/moyand/p/8784210.html 二 什么是面向对象的程序设计及为什么要有它 面向过程的 ...

  3. MVC4.0中cshtml中怎么解析html编码

    http://bbs.csdn.net/topics/391060108?page=1 问题描述: 数据库中存储带有格式的文本,如 <span style="color:#333333 ...

  4. Python 爬虫入门（一）

    毕设是做爬虫相关的,本来想的是用java写,也写了几个爬虫,其中一个是爬网易云音乐的用户信息,爬了大概100多万,效果不是太满意.之前听说Python这方面比较强,就想用Python试试,之前也没用过 ...

  5. Qt 文档编辑设置

    该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处!   导语        前面已经在主窗口中添加了菜单和工具栏,这一篇中我们将实现基本的文本编辑功能 ...

  6. Educational Codeforces Round 26 D dp

    D. Round Subset time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  7. 安装JDK、Tomcat、Maven’详细步骤

    安装JDK 1.首先在官网下载JDK1.8包并解压(随便你装哪个版本) 2.下面开始配置环境变量  此电脑-右键-属性-高级系统配置  点击环境变量 将会看到以下界面 在系统变量下“新建” 变量名(J ...

  8. python学习(25) BeautifulSoup介绍和实战

    BeautifulSoup是python的html解析库,处理html非常方便 BeautifulSoup 安装 pip install beautifulsoup4 BeautifulSoup 配合 ...

  9. Java 从业一年的心得体会

    在你打开此文时,你或许在犹豫这个职业,但是我觉得干就好了,没有适合不适合,趁年轻折腾吧! 以下是我一年来从事Java的经验积累,知识有很多,经验就九条 1.设计的数据库表尽量添加一个状态位,可以在删除 ...

  10. sqlalchemy基本使用

    一.ORM介绍 orm英文全称object relational mapping,就是对象映射关系程序,简单来说我们类似python这种面向对象的程序来说一切皆对象,但是我们使用的数据库却都是关系型的 ...