一：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. 【BZOJ4059】Non-boring sequences

    Solution 记序列为\(a\),计算出与\(a_i\)相等的前一个元素的位置\(pre_i\),以及后一个元素的位置\(nex_i\),显然,对于那些左端点处于\((pre_i,i]\)以及右端 ...

  2. 远程桌面（RDP)上的渗透测试技巧和防御

      0x00 前言 在本文中,我们将讨论四种情况下的远程桌面渗透测试技巧方法.通过这种攻击方式,我们试图获取攻击者如何在不同情况下攻击目标系统,以及管理员在激活RDP服务时来抵御攻击时应采取哪些主要的 ...

  3. phpredis -- Redis Arrays用法

    Redis Arrays 来自地址:https://github.com/phpredis/phpredis/blob/master/arrays.markdown#readme 扩展原文件array ...

  4. svn断开链接后，重新share提交代码报错

    前言:svn怎样断开链接并清除干净请查看此地址-->android studio中断开SVN连接,并彻底清理项目中的.svn文件 1.每次把项目重新关联到新的svn地址上,我都抓狂一样的烦躁,因 ...

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

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

  6. golang 性能测试pprof

    golang 性能测试包是位于 net/http 包下的 pprof,其相关介绍可以参看具体的 官方文档 有关 golang 性能测试使用特别简单,在 main 包中的引包位置直接引入: import ...

  7. Go_15：GoLang中面向对象的三大特性

    有过 JAVA 语言学习经历的朋友都知道,面向对象主要包括了三个基本特征:封装.继承和多态.封装,就是指运行的数据和函数绑定在一起,JAVA 中主要是通过 super 指针来完成的:继承,就是指 cl ...

  8. Cloudstack介绍（一）

    云计算的出现 基本上,云计算只是一种把 IT 资源当作服务来提供的手段.几乎所有 IT 资源都可以作为云服务来提供:应用程序.计算能力.存储容量.联网.编程工具,以至于通信服务和协作工具. 云计算最早 ...

  9. twitter——数据连接

      sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003 ...

  10. 题解 P2486 【[SDOI2011]染色】

    写在前面 对于刚学树剖的同学比如我这种大大大蒟蒻来说,做这题会给你带来很大的提升:不仅可以对树剖有更深刻的理解,还可以更好的理解线段树,所以这是一道好题哦 为了更好懂,我一点一点说说思路吧 思路 首先 ...