前言

牛腩新闻发布系统中记忆最深的就是各种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. ORACLE显式授权

    同一数据库 两个不同用户 user1 user2 user1里面有一张表 table1 在user2里面创建synonymcreate synonym sy1 for user1.table1; 创建 ...

  2. C# Dynamic通用反序列化Json类型并遍历属性比较

    背景 : 最近在做JAVA 3D API重写,重写的结果需要与原有的API结果进行比较,只有结果一致时才能说明接口是等价重写的,为此需要做一个API结果比较的工具,比较的内容就是Json内容,但是为了 ...

  3. leetcode482

    这道题主要使用了C++的几个API,大小写转化,字符串替换.其余的逻辑都比较简单.而且经查资料,string类字符串拼接的速度使用+=的速度是很快的.以下代码,也是用的+=来拼接字符串. string ...

  4. docker 笔记(4) Dockerfile 常用的指令

    下面列出了 Dockerfile 中最常用的指令,完整列表和说明可参看官方文档. FROM指定 base 镜像. MAINTAINER设置镜像的作者,可以是任意字符串. COPY将文件从 build ...

  5. js常见的字符串及数组处理

    最近工作设计前台比较多,由于好久没动前台,或者使用前台框架习惯了,js有点生,将常见的字符串处理忘了,在这里整理一下常见的,以便于查阅: 1.substr():字符串分割,第一个是开始的下标,第二个是 ...

  6. 使用NDK编译 libyuv <转>

    官方源码:http://code.google.com/p/libyuv/简介: libyuv is an open source project that includes YUV scaling ...

  7. android键盘的Done按钮

    在EditText中,可以使用setImeOptions()方法来来开启软键盘的"Done"按钮. 示例代码如下:editText.setImeOptions(EditorInfo ...

  8. oracle 之sys 、system区别

    角色 1)最重要的区别,存储的数据的重要性不同sys--所有oracle的数据字典的基表和视图都存放在sys用户中,这些基表和视图对于oracle的运行是至关重要的,由数据库自己维护,任何用户都不能手 ...

  9. IE6中浮动双边距bug

    想要创建出漂亮的网页设计, 除了要认真学习每一个html和CSS代码之外,不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气,因为你本来写出的规规矩矩的代码, 漂亮的设计就此就要完成了, ...

  10. 使用ffmpeg压缩视频

    命令: ffmpeg -i 1.avi -b 64k 1-64k.avi ffmpeg下载:http://dl.pconline.com.cn/download/53703.html