CSS选择器及CSS样式表
2024-08-24 05:39:00
前言
牛腩新闻发布系统中记忆最深的就是各种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>
各种方式的优先级:内联样式>外部样式表>内部样式表
感谢您的宝贵时间···
最新文章
- Please allow Subclipse team to receive anonymous usage statistics for this Eclipse intance(info)
- 数据库imp导表dmp的方法
- canvas缓动2
- Mac系统修改Intellij Idea默认JDK版本
- PL/SQL之--触发器
- Web应用程序或者WinForm程序 调用 控制台应用程序及参数传递
- Web Service 其他服务器检测不到查询测试按钮
- MongoDB性能监控
- DZY Loves Chemistry 分类: CF 比赛 图论 2015-08-08 15:51 3人阅读 评论(0) 收藏
- 快速创建maven 工程:simple java工程,webapp
- 小结JS中的OOP(下)
- 应用完全启动后, Spring执行自定义初始化
- Code for the Homework1 改进
- 【BZOJ 2005】[Noi2010]能量采集 (容斥原理| 欧拉筛+ 分块)
- MVC中,加入的一个aspx页面用到AspNetPager控件处理办法
- protel99与win7兼容问题的解决方案
- mongodb的TTL索引介绍(超时索引)
- hover如何在移动浏览器上触发
- 102 - kube-scheduler源码分析 - cobra-寻找scheduler组件启动函数
- 使用Mermaid画图
热门文章
- jsp 的url传参中文乱码问题解决办法
- popd命令
- Java-API:java.math.BigDecimal
- 关于无法解析的外部符号 _main
- oracle 远程tns配置
- VS2010 rdlc报表无法显示“数据源”选项
- sqlserver 查询int类型 in (字符串) 报转换int类型出错的问题
- android-auto-scroll-view-pager (无限广告轮播图)
- C++——static
- 生产者与消费者-N:N-基于list