前言

牛腩新闻发布系统中记忆最深的就是各种CSS选择器各种CSS样式，这些选择器之间肯定有它的优先级，包括CSS样式也一样，也是有它的优先级，本文介绍一些各种CSS选择器各种CSS样式以及它们的优先级。

内容

CSS语法

由两个主要的部分构成：选择器，以及一条或者多条声明。

CSS选择器部分

DEMO

标记选择器

Html部分

  <!--标记选择器-->

<h1>Hello World</h1>

CSS部分

h1{

  color:red;

  font-size:12px;

}

id选择器

Html部分

  <!--id选择器-->

<div id="iddemo">Zhoulitong</div>

CSS部分

#iddemo{

  color:red;

  font-size:12px;

}

类别选择器

Html部分

  <!--类别选择器-->

<div class="iddemo">Zhoulitong</div>

CSS部分

.iddemo{

  color:red;

  font-size:12px;

}

最常用的选择器就上面的三种，它们的效率优先级：id选择器（#id）>类选择器（.class）>标记选择器（div，h1，p），其实还有其他选择器比如：相邻选择器，子选择期，后代选择器，通配符选择器，属性选择器，伪类选择器，这些不是特别常用的，在这里不做解释。

CSS样式表部分

外部样式表（链接式）：当样式需要被应用到多个页面时候，外部样式将是理想的选择。使用该样式表可以通过更改一个文件来改变整个站点外观。

<head>

    <title>@ViewBag.Title</title>

                @*链接样式*@

    <link href="../../CSS/Master.css" rel="stylesheet" />

</head>

内部样式表（内嵌式）：单个文件需要时用到内部样式表。一般在通过<style></style>标签定义内部样式表。

<head>

<style type="text/css">

  hr {color: sienna;}

  p {margin-left: 20px;}

  body {background-image: url("images/back40.gif");}

</style>

</head>

内联样式（行内样式）：特殊的样式需要应用到个别元素时，可以采用内联样式，使内联样式的方法是在相关标签中使用样式属性。采用style=””形式。

                                @*行内样式*@

 <div style="margin-top :30px;margin-right :20px; float:right ;width :600px;text-align :center ;">

    检索类型：<select id="SelectText" style ="padding-left:4px;padding-right :4px; ">

        <option>书籍类别</option>

        <option>书籍作者</option>

        <option>书籍名称</option>

    </select>

        

    检索内容：<input id="SearchText" type="text" />

    <input id="Button1" type="button" value=" 检索 " onclick="SearchClick()" />

</div>

各种方式的优先级：内联样式>外部样式表>内部样式表

感谢您的宝贵时间···

CSS选择器及CSS样式表的更多相关文章

  1. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

  2. css基础-css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...

  3. Css选择器(上) 让样式无孔不入

    css选择器    一个可以选择样式的工具, 这里适用于无论是内部代码还是外部引用 abc.css 这类型的文件. 基本选择器*{ }        就是一个简单的*, 代表应用于全部. 不适合于个性 ...

  4. CSS 四种引入样式表优缺点分析

    CSS 四种引入样式表 CSS 有四种方式引入样式表,如下: 外部样式表 内部样式表 行内样式表 导入样式表 外部样式表优缺点 优点 实现了结构与表现的代码完全分离 方便复用及维护 因为分离到各自独立 ...

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

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

  6. CSS 选择器及各样式引用方式

    Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...

  7. CSS标签类型和样式表继承与优先级

    标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...

  8. CSS三种插入样式表格式

    首先简单理解浏览器与网页的交互过程 CSS样式表(stylesheet) cascading style sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言:包含对字体.颜色.边距. ...

  9. CSS的三种样式表和优先级

    1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...

随机推荐

  1. Java栈,队列,优先队列的使用

    1. 栈的使用: import java.util.*; public class Main{ public static void main(String[] args){ Deque<Str ...

  2. el表达式对js方法的传值

    我常用于在jsp页面遍历集合和分页中的页面跳转事件. jsp: <!-- 引入jstl --> <%@ taglib prefix="c" uri="h ...

  3. java添加背景图片

    总结:我们通常实现添加背景图片很容易,但是再添加按钮组件就会覆盖图片.原因是: 有先后啊.setlayout();与布局有很大关系 请调试代码的时候,仔细揣摩.我晕了 还可以添加文本框,密码框 fra ...

  4. VI与VIM区别

    Vim是从 vi 发展出来的一个文本编辑器 .代码补完.编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用.和Emacs 并列成为类Unix系统 用户最喜欢的编辑器. Vim的第一个版本由B ...

  5. uptime命令查看系统启动时间和运行时间、查看linux系统负载

    1.uptime命令输出:16:11:40 up 59 days, 4:21, 2 users, load average: 0.00, 0.01, 0.00 2.查看/proc/uptime文件计算 ...

  6. [置顶] linux getline()函数

    getline()函数是什么?百度百科这样解释:      getline不是C库函数,而是C++库函数.它会生成一个包含一串从输入流读入的字符的字符串,直到以下情况发生会导致生成的此字符串结束.1) ...

  7. 如何同时打开两个UltraEdit

    高级—配置—应用程序布局—其它,勾上资源管理器选的文件将以独立的UltraEdit打开和允许多个UltraEdit

  8. VxVM如何扩展和收缩卷及文件系统

    1. 同时扩展卷和文件系统 先用vxassist命令检查DG可用空间 [root@rhelnode1 ~]# vxassist -g testdg maxsize Maximum volume siz ...

  9. CORS实现跨域Ajax

    客户端 #!/usr/bin/env python import tornado.ioloop import tornado.web class MainHandler(tornado.web.Req ...

  10. [bzoj2460] [BeiJing2011]元素(线性基+贪心)

    题目大意: 有一些矿石,每个矿石有一个a和一个b值,要求选出一些矿石,b的和最大且不存在某个矿石子集它们的a的异或和为0. 解题关键:对魔力进行由大到小排序,依次加入线性基,统计即可. #includ ...