前言

牛腩新闻发布系统中记忆最深的就是各种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. jackson 进行json与java对象转换 之二

    主要用于测试学习用jackson包实现json.对象.Map之间的转换. 1.准备测试用的Java类 (1)Link类 package test; /** * Description: 联系方式,被u ...

  2. javascript——对象的基础知识

    一.javascript作为脚本语言可以完成以下任务: 操纵浏览器对象,如窗口的打开与关闭: 操纵Dom树: 通过XMLHttpRequest对象与服务器端进行异步通信: XML编程,借助于Activ ...

  3. CMake 使用方法 & CMakeList.txt<转>

    CMake 使用方法 & CMakeList.txt cmake 简介 CMake是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各种各样的make ...

  4. VS调试程序时，程序出现异常，但VS不报错的解决方案

    在调试>异常> 里面把勾全勾上就行了!

  5. JavaScript toLowerCase() 方法

    定义和用法 toLowerCase() 方法用于把字符串转换为小写. 语法 stringObject.toLowerCase() 返回值 一个新的字符串,在其中 stringObject 的所有大写字 ...

  6. Node 中的 stream (流)

    流的概念 流(stream)在 Node.js 中是处理流数据的抽象接口(abstract interface). stream 模块提供了基础的 API .使用这些 API 可以很容易地来构建实现流 ...

  7. php环境引起的"syntax error unexpected $end"

    今天在网上淘了一段php和javascript的二级联动下拉菜单的代码.本地运行的时候,一直提示错误 syntax error unexpected $end 本来还以为是括号或者标签没有用好,但是仔 ...

  8. 简单的jQuery前端验证码校验

    简单的jQuery前端验证码校验2 html; <!DOCTYPE html> <html lang="zh-cn"> <head> <m ...

  9. 解析IFC数据并存储到关系型数据库

    即系IFC数据并存储到关系型数据库中,目前解析的IFC文件是两亿多行,构件数量120万

  10. sleep()和usleep()

    函数名: sleep头文件: #include <windows.h> // 在VC中使用带上头文件        #include <unistd.h>  // 在gcc编译 ...