css层叠样式初学
一、css简介
1、层叠样式表:叠加效果,不同css对同一html修饰,冲突部分,优先级高作用,不冲突部分,共同作用
2、css作用
(1)修饰html
(2)替代了标签自身的颜色,字号等属性,提高复用性
(3)html内容与样式分离,便于后期维护
3、css引入方式
(1)内嵌样式
<div style="color:red;font-size:100">内嵌方式</div>
(2)内部样式(写在head中)
<style type="text/css">
div{color:red;font-size:100}
input{color:red;font-size:100}
</style>
(3)web全局样式
1.创建css文件
2.键入:div{color:red;font-size:200px}
3.引入该css文件
<link ref="stylesheet" href="cssDemo.css" type="text/css">
(4)@import方式
基本不用,原因迟滞于html加载css,不支持js动态修改,部分低ie版本不支持
小结:
style:告知浏览器使用css去解析
ref:css和html的关系
引入写在head中
内部样式也写在head中
二、css选择器
1、基本选择器
(1)、标签/元素选择器
<style>
div{color:red;font-size:10px}
</style>
(2)、id选择器
<style>
#div1{color:red;font-size:10px}
</style>
<div id="div1">id选择器</div>
(3)、class选择器
<style>
.style1{color:red;font-size:10px}
.style2{color:pink;font-size:10px}
</style>
<div class="style1">id选择器1</div>
<div class="style1">id选择器2</div>
<div class="style2">id选择器3</div>
优先级总结:id选择器>类选择器>标签选择器
2、属性选择器
<style>
input[type='text']{background-color:green}
input[type='password']{background-color:yellow}
</style>
<form>
name<input type="text" value=""/>
password<input type="password" value=""/>
</form>
3、a标签伪元素选择器
语法:鼠标放到链接上有四种状态
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
点击状态 a:active{css属性}
释放状态 a:visited{css属性}
<style type="text/css">
a:link{background-color:white}
a:hover{background-color:pink}
a:active{background-color:red}
a:visited{background-color:green}
</style>
<a href="#">hit me</a>
4、层叠选择器
语法:适用于div嵌套,给其中指定的元素修饰
<style>
#div1 .div1class span{color:red;font-size:100px}
.body2 .div2class span{color:pink;font-size:50px}
</style>
三、css属性
1、文字属性
font-size:字体大小
font-family:字体类型
2、文本属性
color:颜色
text-decoration:下划线
属性值:none/underline
text-align:对齐方式
属性值:left/right/center
3、背景属性
background-color:背景颜色
background-image:背景图片
background-repeat:平铺方式
属性值:repeat-x/repeat-y/repeat
4、列表属性
list-style-type
属性值很多,用时查
可以在li前面加图片,效果很棒
格式:list-style-image:url("xxx.gif");
5、尺寸属性
width:宽
height:高
6、显示属性
display
属性值:none/inline
<style type="text/css">
span{display:none;color:red}
</style>
<script type="text/javascript">
function deal(){
document.getElementById("span").style.display="inline";
}
</script>
<form>
username<input type="text" value="">
<span id="span">对不起您的输入有误!</span><br>
password<input type="password" value=""><br>
<input id="btn" type="button" value="button" onclick="deal()">
</form>
7、浮动属性
float:
属性值:
left:向左浮
right:向右浮动
clear:
属性值:
left:清除左浮动
right:清除右浮动
both:左右均清除
<style type="text/css">
#div1{background-color:red;width:50px;height:60px;float:left}
#div2{background-color:green;width:50px;height:60px;float:left}
#div3{background-color:pink;width:50px;height:60px;float:left}
</style>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
8、盒子模型
查资料
css层叠样式初学的更多相关文章
- CSS层叠样式选择器归纳
常用选择器 1.1 类型选择器:用来寻找特定类型的元素 标签 { 声明 } p { color:black; } h1 { font-weight:bold; } 1.2 后代选择器: 选择一个元 ...
- css层叠样式优先级总结
虽然学前端最刚开始就是html+css,一直因为这些看起来太简单就没有什么总结,不过看似很简单的东西,研究起来也深不可测,问起来js可能回答的头头是道,css这么简单的东西,其中一个优先级的问题就能难 ...
- CSS层叠样式
为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表.有了CSS,html中大部 ...
- 学习前端第二天之css层叠样式
一.设置样式公式 选择器 {属性:值:} 二.font 设置四大操作 font-size:字体大小 (以像素为单位) font-weight:字体粗细 font-family:字体 ( 可直接跟 ...
- CSS 层叠及样式表来源
Web标准化运动的口号——分离.分离.分离. 在2003年的 SXSW 会议中, Steve Champeon 和 Nick Finck 做了一个名为“面向未来的全方位 Web 设计”的演讲,揭示了这 ...
- CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源
CSS样式的引入: 内部样式: 内部样式:写在当前页面style标签中的样式 内联样式:写在style属性中的样式 外部样式: link标签引入的CSS文件 @import引入的CSS文件,需要写在c ...
- CSS层叠
前面的话 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 ...
- CSS层叠和继承
CSS具有两个核心的概念--继承和层叠.一般文本类的属性会被继承,即某个元素的CSS属性会传递给内部嵌套的元素.一个元素可能有一个或者多个样式的来源,当属性发生冲突时,就会根据加载顺序和权重大小决定层 ...
- css层叠规则,优先级算法
前言 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 特 ...
随机推荐
- WPF: WpfWindowToolkit 一个窗口操作库的介绍
在 XAML 应用的开发过程中,使用MVVM 框架能够极大地提高软件的可测试性.可维护性.MVVM的核心思想是关注点分离,使得业务逻辑从 View 中分离出来到 ViewModel 以及 Model ...
- ZOJ3602:Count the Trees
我是在neuqvj上交的这题:http://vj.acmclub.cn/problem/viewProblem.action?id=17848 本来是挺容易的树同构题,可是节点数比较多,愣是把普通ha ...
- 【Zigbee技术入门教程-号外】基于Z-Stack协议栈的抢答系统
[Zigbee技术入门教程-号外]基于Z-Stack协议栈的抢答系统 广东职业技术学院 欧浩源 一.引言 2017年全国职业院校技能大赛"物联网技术应用"赛项中任务三题2的 ...
- Spark学习笔记1(初始spark
1.什么是spark? spark是一个基于内存的,分布式的,大数据的计算框架,可以解决各种大数据领域的计算问题,提供了一站式的服务 Spark2009年诞生于伯克利大学的AMPLab实验室 2010 ...
- React Native学习(七)—— FlatList实现横向滑动列表效果
本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...
- 使用phpMyAdmin批量修改Mysql数据表前缀的方法
多个网站共用一个Mysql数据库时,为使数据库管理不混乱,一般采用不同的网站使用不同前缀名的方式进行区分.而如何批量修改已有数据库的前缀名呢?全部导出修改后再导入?还是一个表一个表的修改?今天我要介绍 ...
- PHP中file_exists()函数不能检测包含中文的文件名的解决办法
版权声明:本文为博主原创文章,未经博主允许不得转载. PHP中一般使用file_exists()判断某个文件或者文件夹是否存在,如果文件或文件夹存在则返回true,不存在则返回fal ...
- php页面zend加密乱码的解决办法
http://www.chinaz.com/program/2008/1021/41485.shtml?qq-pf-to=pcqq.group 今天在服务器部署一个php程序是有zend加密的页面出现 ...
- PHP正则式PCRE
PHP正则式PCRE的总结差不多就下边这些了.参考 PCRE与perl的差异 . 锚(^.$.\A.\Z/\z):^.$在多行模式下是非紧固的,在单行模式下是紧固的:而\A.\Z / \z在任何模 ...
- Mac 下 搭建 svn 服务器
Mac自带了svn服务端和客户端,所以只需要简单配置一下就可以使用. 1.创建svn repository svnadmin create /Users/gaohf/svn/repository 2. ...