前言

牛腩新闻发布系统中记忆最深的就是各种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. 机器学习:SVM(核函数、高斯核函数RBF)

    一.核函数(Kernel Function) 1)格式 K(x, y):表示样本 x 和 y,添加多项式特征得到新的样本 x'.y',K(x, y) 就是返回新的样本经过计算得到的值: 在 SVM 类 ...

  2. web页面导出到Excel乱码解决

    引言: 前几天 在做web项目的时候 需要导出页面上的数据 到Excel里面 但有的时候出现乱码(有de时候不出现 很奇怪) 原来的代码是这样的: HttpContext.Current.Respon ...

  3. DVWA平台v1.9-Brute Force

    Low: 随便输一下用户名,密码,test 点击Login 显示用户名或密码错误 在owasp-zap查看数据包 点击,就会转到这 右键,点击Fuzz 点击Remove删除默认的 选定参数变量值,点击 ...

  4. SpringBoot外部配置

    Spring Boot的配置文件 Spring Boot使用一个全局的配置文件application.properties或者application.yml(yaml语言的配置文件),放置在src/m ...

  5. eclipse怎么查看class文件(eclipse安装反编译插件)

    本人eclipse版本: Eclipse Java EE IDE for Web Developers. Version: Mars.2 Release (4.5.2) 步骤1:下载两个我们需要的东西 ...

  6. tomcat是一个应用服务器

    总的来说,tomcat的身份可以看作一个WEB容器,但实际上是一个应用程序服务器.为什么这么说?1.因为你从tomcat内部看你会发现其实tomcat内置了一个轻量级的WEB服务器,用于转发html文 ...

  7. Servlet开发中注意的细节问题

    客户端访问服务器的时候是通过URL访问的,所以我们要想用浏览器访问我们的Servlet的时候,我们就需要将我们的Servlet映射到一个URL上(通过我们的web.xml文件中的<servler ...

  8. 用于.NET环境的时间测试(转)

    用于.NET环境的时间测试   在.NET环境中,衡量运行完整算法所花费的时间长度,需要考虑很多 需要考虑很多种情况 ,如:程序运行所处的线程以及无用单位收集(GC垃圾回收). 在程序执行过程中无用单 ...

  9. WINFORM 开发模式,窗体回到默认样式方法。

    软件分为3类   客户端  网站应用  app WINFORM 主要用来只做客户端应用程序.C/S 客户端程序很重要的特点:可以操作用户电脑上的文件,执行在客户端上,电脑的配置越高执行就越流畅. 在p ...

  10. .NET回归 HTML----超文本标记语言(暂时无图)

    HTML用来做网页,文件拓展名改为html可以形成网页 超文本标记语言==超越了文字的范畴,除了文字还可以有图片.视频.音频.动画特效等其它内容,由标记符号<>组成的一门计算机编程语言 H ...