CSS 简介
CSS 简介
需要具备的基础知识
在继续学习之前，你需要对下面的知识有基本的了解：
- HTML
- XHTML
CSS 概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
style应用的方式：
style样式的应用有三种方式：
1.在标签上面通过style属性设置.
<body>
<div style="background-color: red;color: green;">
hello world<br>
welcome to china
</div> </body>
2.将sytle样式写在<head></head>中，然后使用class引用样式.免代码重用，和代码可以避简洁.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.logo {
background-color: red;
font-size: 18px;
border: 1px;
}
.logo a{ <!--a标签拥有logo属性,并引用自己的属性 -->
font-size: 56px;
}
.logo a,p{ <!--a和p标签同时拥有logo属性 -->
font-size: 56px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="logo"> <!--让a标签和p标签同时拥有logo属性 -->
<div>div标签</div>
<a>a标签</a>
<p>p标签</p>
</div>
</body>
</html>
3.将sytle样式写入common.css文件中然后倒入使用.这种方法支持多个文件使用同一个css样式文件.代码简洁方便，推荐使用.
#css/common.css文件：
.a1{
background: red;
}
.a2{
background: yellow;
}
.logo {
font-size: 56px;
background-color:lightslategrey;
}
.c {
font-size: 20px;
background-color: red;
} ########################################
#html文件 <head>
<link rel="stylesheet" href="css/common.css"/> <!--倒入css样式文件 -->
</head> <body>
<div class="a2">hello world</div> <!--引用css样式中的a2属性 -->
<span class="logo">goodbye</span> </body>
css选择器：
1.标签选择器
div{
background-color:red;
}
<div > </div>
2.class选择器
.bd{
background-color:red;
}
<div class='bd'> </div>
3.id选择器
#idselect{
background-color:red;
}
<div id='idselect' > </div>
上述三种选择器使用最广泛的为class选择器
4.关联选择器
#idselect p{
background-color:red;
}
<div id='idselect' >
<p> </p>
</div>
5.组合选择器
#让cc1和cc2应用同一个样式
.c1 #il a .cc1,.cc2{
background-color:red;
}
6.属性选择器
<head>
.conn input[type='text']{
width:100px; height:200px;
} </head>
<body>
<div class="conn">
<input type="text"/>
<input type="password"/>
</div> </body>
CSS常用属性:
background属性
background-color
background-image
background-repeat
<div style="background-color: red">hello world</div> #设置背景颜色
<div style="background-image:url('image/4.gif'); height: 80px;"></div> #设置背景图片属性，div特别大，图片特别小时图片叠加
<div style="background-image:url('image/4.gif'); height: 80px;background-repeat:no-repeat"></div> #不要重复
background-position(背景位移)
height:31px; #挖洞的高和宽
width:26px;
background-position #移动图片位置
border(边框)属性：
solid 表示实线，边框颜色是红色
dotted表示虚线
<body>
<h2>border</h2>
<div style="border: 20px solid red;height: 10px"></div>
<div style="border: 2px dotted red;height: 10px"></div>
</body>
dispaly属性：
隐藏或显示样式或字体
块级标签和内联标签是可以相互转换的
display:none 隐藏不显示
display:block display设置为block时由内联标签变为块级标签
display:inline display设置为inline时由块级标签变为内联标签
<span style="background-color: red">asdf</span>
<span style="display: none;">asdf</span>
cursor属性：
鼠标放在不同位置显示不同的图标
<body>
<ul>
<li>css提供的cursor值</li>
<p>
<span style="cursor:pointer;">pointer</span>
||
<span style="cursor:help;">help</span>
||
<span style="cursor:wait;">wait</span>
||
<span style="cursor:move;">move</span>
||
<span style="cursor:crosshair;">crosshair</span>
</p>
</ul>
</body>
float(浮动)
页面的布局，通过设置float属性来布局页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.w-letf{
width:20%; <!--宽度-->
background-color: red; <!--背景-->
height:500px; <!--高度-->
float: left; <!--向左漂移-->
}
.w-right{
width: 80%;
background-color: green;
height: 500px;
float: left;
}
</style>
</head>
<body>
<div>
<div class="w-letf"></div>
<div class="w-right"></div>
</div>
</body>
</html>
<div style="background-color: red;">
<div style="float: left;">1111</div>
<div style="float: left;">2222</div>
<div style="clear: both;"></div> #加上词句为强制显示父标签，不然上面两个子div float后父div背景颜色就被冲掉了 </div>
显示父标签样式
内外边距
padding(内边距)：增加自己本身的高度和宽度
<div style="background-color: green;height: 200px ">
<div style="background-color: red;height: 50px;padding-top: 20px"></div> </div>
margin(外边距)：外面增加高度和宽度
<div style="background-color: green;height: 200px ">
<div style="background-color: red;height: 50px;margin-top: 20px"></div>
</div>
margin:0 auto; -->想让页面居中，加上此参数即可
position 位置固定：
http://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html
fixed - 固定浏览器窗口位置
<body>
<a style="position: fixed;left: 30px;top: 30px;">返回顶部</a>
<div id="content" style="height: 2000px;background-color: greenyellow"></div> <a style="position: fixed;right: 30px;bottom: 30px;"href="#content">返回顶部</a>
</body>
relative
absolute (默认放在浏览器的)右下角
这两个放在一起用
<body>
<div style="position: relative;background-color: beige;width: 300px;margin: 0 auto;height: 300px">
<h1>修改数据</h1>
<a style="position: absolute;right: 0;bottom: 0px;">hello</a>
</div> </body>
overflow
auto --当内容超出div大小时，设置为overflow:auto会出现滚动条.
hidden --隐藏，当内容超过div大小时，多出的内容将被隐藏
<div style="height: 100px;background-color: greenyellow;overflow: auto">
hello world<br>
hello world<br>
hello world<br>
hello world<br>
hello world<br>
hello world<br>
hello world<br>
hello world<br> </div>
<div style="height: 100px;background-color: greenyellow;overflow: hidden">
hello world<br>
hello world<br>
hello world<br>
hello world<br>
hello world<br>
hello world<br>
hello world<br>
hello world<br> </div>
不让页面有边距方法；
想让整个页面无边框，给body加上样式即可
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0 auto;
}
</style>
</head>
<body>
<div style="height: 100px;background-color: greenyellow;overflow: hidden">
hello world<br>
hello world<br>
hello world<br>
hello world<br>
</div> </body>
透明度 opacity
z-index
z-index 值越大越靠近显示，值越小越靠近底层
<body>
hello html/css/js
<div style="height: 2000px;"></div>
<input type="button" value="提交数据"/>
<div style="z-index: 1;opacity: 0.5;position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: black"></div>
<div style="z-index: 2;position: fixed;left: 50%;top: 50%;margin-left: -150px;margin-top: -50px">
<div style="background-color: white;width: 300px;height: 100px;">
<input/>
<input/>
<input/>
</div>
</div>
</body>
页面布局代码样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0 auto;
}
.pg-header{
background-color: darkslateblue;
height: 48px; }
.pg-body .menu{
background-color: cornflowerblue;
position: absolute;
top: 50px;
left: 0;
bottom: 0;
width: 200px;
overflow: auto; }
.pg-body .content{
background-color: chartreuse;
position: absolute;
right: 0;
top: 50px;
bottom: 0;
left: 210px;
overflow: auto;
} </style>
</head>
<body>
<div class="pg-header">页面布局</div>
<div class="pg-body">
<div class="menu">
<a>123</a>
<a>123</a>
<a>123</a>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<div class="content">
abcd
<div style="height: 1000px;">
<h1 style="color: #FF6600">fdafdaf</h1>
</div>
</div>
</div> </body>
</html>
CSS 简介的更多相关文章
- html5快速入门（二）—— CSS简介
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- CSS那些事儿-阅读随笔1（CSS简介与选择符）
最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...
- CSS 简介、 选择器、组合选择器
#CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- CSS（一）：CSS简介和基本语法
一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet:即层叠样式表.样式定义了如何显示HTML或XHTML元素.包括对字体.颜色.边距.高度.宽度.背景图片.网页定位等 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS简介
HTML使用标签将内容放到网页上,也可使用元素和属性来控制简单的文档外观.如果希望更全面地控制Web页面的外观和布局,则需要使用层叠样式表(简写为CSS).CSS规范的工作原理在于允许用户制定一些规则 ...
- CSS：CSS 简介
ylbtech-CSS:CSS 简介 1.返回顶部 1. CSS 简介 你需要具备的知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML / XHTML 如果你希望首先学习这些项目,请在 ...
- Bulma CSS - 简介
Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是什 ...
- CSS 简介/特点/优势/给特定浏览器提供不同样
1.CSS简介 CSS全称Cascading Style Sheet,可译为“层叠样式表”或“级联样式表”,通常称为CSS样式或者样式表.CSS是一些纯文本内容,文件格式为.css. 2.CSS特点 ...
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
随机推荐
- 理解 Mybatis的分页插件 PageHelper
Mybatis + SpringMVC + Maven实现分页查询 (推荐采用的插件是PageHelper) 先看一下之前的这篇博客,这里推荐了 Mybatis 的分页方法. 按照上面的方法设置后,确 ...
- Java+FlexPaper+swfTools仿百度文库文档在线预览系统设计与实现
笔者最近在给客户开发文档管理系统时,客户要求上传到管理系统的文档(包括ppt,word,excel,txt)只能预览不允许下载.笔者想到了百度文库和豆丁网,百度文库和豆丁网的在线预览都是利用flash ...
- 总结的js性能优化方面的小知识
前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己 ...
- 【转】ViewPager学习笔记（一）——懒加载
在项目中ViewPager和Fragment接口框架已经是处处可见,但是在使用中,我们肯定不希望用户在当前页面时就在前后页面的数据,加入数据量很大,而用户又不愿意左右滑动浏览,那么这时候ViewPag ...
- js-this的用法，来自阮一峰老师的文章
1. 随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是,调用函数的那个对象. 或者说,this指向当前执行的函数的所有者. 2.情况一:纯粹的函数调用 这是函数 ...
- 【BZOJ-1176&2683】Mokia&简单题 CDQ分治
1176: [Balkan2007]Mokia Time Limit: 30 Sec Memory Limit: 162 MBSubmit: 1854 Solved: 821[Submit][St ...
- 【poj1738】 An old Stone Game
http://poj.org/problem?id=1738 (题目链接) 题意 一排n堆石子,合并两堆石子的代价为两堆石子总数之和.问将所有石子合并为一堆所需要的最小代价. Solution 本来想 ...
- Servlet基础-手工编写第一个servlet
[手工编写第一个servlet] [步骤] 1.继承HttpServlet 2.重写doGet()或者doPost()方法 //这个doGet或者doPost方法取决用户提交的方式 3.在web.x ...
- squid安装配置
Squid做反向代理(192.168.1.69) squid.conf http_port 80 vhost vport visible_hostname pdd2.matrixcdn.net cac ...
- 巧妙的重载魔术方法__call()
工作半年了,感觉这半年学到的东西比大学四年学到的还要多,主要原因是心静下来了,目标也明确了,不会去整天的和游戏纠缠在一起了.大学时候其实也意识到了玩游戏会影响自己的正常学习和工作的,但是一直控制不了自 ...