CSS选择器及CSS样式表
前言
牛腩新闻发布系统中记忆最深的就是各种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样式表的更多相关文章
- from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置
目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...
- css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...
- Css选择器(上) 让样式无孔不入
css选择器 一个可以选择样式的工具, 这里适用于无论是内部代码还是外部引用 abc.css 这类型的文件. 基本选择器*{ } 就是一个简单的*, 代表应用于全部. 不适合于个性 ...
- CSS 四种引入样式表优缺点分析
CSS 四种引入样式表 CSS 有四种方式引入样式表,如下: 外部样式表 内部样式表 行内样式表 导入样式表 外部样式表优缺点 优点 实现了结构与表现的代码完全分离 方便复用及维护 因为分离到各自独立 ...
- Unit02: CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明
Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...
- CSS 选择器及各样式引用方式
Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...
- CSS标签类型和样式表继承与优先级
标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...
- CSS三种插入样式表格式
首先简单理解浏览器与网页的交互过程 CSS样式表(stylesheet) cascading style sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言:包含对字体.颜色.边距. ...
- CSS的三种样式表和优先级
1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...
随机推荐
- 机器学习:PCA(人脸识别中的应用——特征脸)
一.思维理解 X:原始数据集: Wk:原始数据集 X 的前 K 个主成分: Xk:n 维的原始数据降维到 k 维后的数据集: 将原始数据集降维,就是将数据集中的每一个样本降维:X(i) . WkT = ...
- JAVA生成Word文档(经过测试)
首先告诉大家这篇文章的原始出处:http://www.havenliu.com/java/514.html/comment-page-1#comment-756 我也是根据他所描述完成的,但是有一些地 ...
- mybatis 学习二 MyBatis简介与配置MyBatis+Spring+MySql
1.2.2建立MySql数据库 在C:\Program Files\MySQL\MySQL Server 5.7\bin下面: 首先连接MySQL: mysql -u root -p ...
- OpenCV 视频监控(Video Surveilance)的算法体系
如前面说到的,OpenCV VS提供了6组算法的接口,分别是:前景检测.新目标检测.目标跟踪.轨迹生成.跟踪后处理.轨迹分析,除了轨迹生成用于轨迹数据的保存以外,其他5个部分都是标准的视频监控算法体系 ...
- SpringMVC—对Ajax的处理(含 JSON 类型)(3)
五.服务器端的 SpringMVC 如何返回 JSON 类型的字符串. 请求: $("#testJson8").click(function () { $.ajax({ ...
- mybatis---demo1--(n-n)----bai
实体类1: package com.etc.entity; import java.util.List; public class RoleInfo { private int rid; privat ...
- Even uploading a JPG file can lead to Cross-Site Content Hijacking (client-side attack)!
Introduction: This post is going to introduce a new technique that has not been covered previously i ...
- Oracle Management Packs
http://kerryosborne.oracle-guy.com/2008/10/oracle-management-packs/ There has been quite a bit of co ...
- LAMP 2.7 Apache通过rewrite限制某个目录
我们可以 allow 和 deny 去现在网站根目录下的某个子目录,当然这个 rewrite 也可以实现,配置如下: 创建一个目录和文件随便写些东西 mkdir /data/www/data/tmp ...
- mybatis中in查询
xml配置 : <select id="selectPostIn" resultType="dasyskjcdtblVo"> SELECT SYS_ ...