一：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. CF 997E 解题报告

    CF997E Good Subsegments 给你一个长度为\(n\)的排列 \(P\),定义一段子区间是好的,当且仅当这个子区间内的值构成了连续的一段.例如对于排列\(\{1,3,2\}\),\( ...

  2. Redis中国用户组|唯品会Redis cluster大规模生产实践

    嘉宾:陈群 很高兴有机会在Redis中国用户组给大家分享redis cluster的生产实践.目前在唯品会主要负责redis/hbase的运维和开发支持工作,也参与工具开发工作 Outline 一.生 ...

  3. NTT+多项式求逆

    #include<iostream> #include<cstdio> #include<algorithm> #include<cstring> #i ...

  4. jq获取兄弟节点

    $('#id').siblings() 当前元素所有的兄弟节点$('#id').prev() 当前元素前一个兄弟节点$('#id').prevaAll() 当前元素之前所有的兄弟节点$('#id'). ...

  5. SpringMVC 上传文件（文件非必填）MultipartHttpServletRequest

    原文:https://blog.csdn.net/dorothy1224/article/details/79136676 上传文件(文件非必填)MultipartHttpServletRequest ...

  6. js 字符串格式化

    在js 文件中写一个函数 String.prototype.format = function(args) { var result = this; if (arguments.length > ...

  7. pymc

    sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...

  8. in的对象选择（子查询还是List集合），in 的优化，in与exists

    近日查看SQL慢查询日志,发现对于in的查询总是出现超时问题.超时相关SQL语句:select * from flow_ru_bizvar where businessId IN () and sta ...

  9. RAC转换传统的通信

    ///////////////////各种机制转信号/////////////////////////////// 1.UI事件 [self.logInButton rac_signalForCont ...

  10. 科学计算三维可视化---Mlab基础（常用控制函数）