第2天-css快速入门
css是什么
css（cascading style sheet,可以译为“层叠样式表”），是一组格式设置规则，用于控制web页面的外观
如何让一个标签具有样式
第一步：必须保证引入方式正确
第二步：必须让css和html元素产生关联，也就是说要先找到这个元素
第三步：用相应的css属性去修改html元素样式
css的三种引入形式
1、将css内嵌到HTML文件中，这种方式又叫内联样式表，例如
<head>
...
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
内联样式表
2、将一个外部样式链接到HTML文件中，这种方式又叫链接样式表，例如：
<head>
...
<link rel="stylesheet" href="css/index.css" />
</head>
链接外部样式
3、将样式表加入到HTML文件中，这种方式又叫做行内样式表
<body>
<div style="width: 200px;height: 200px;background: green;"></div>
</body>
行内样式
选择器
div {
属性：属性值；
}
标签选择器
#box {
属性：属性值；
}
<div id='box'></div>
id选择器
.box {
属性：属性值；
}
<div class='box'></div>
类选择器
相邻选择器可以选择紧跟其后的相邻元素，相邻选择器用+号来连接
h1+div {
width: 100px;
height: 100px
background-color: blue;
}
<h1>css样式测试</h1>
<div id='div1'></div>
<div id='box'></div>
相邻选择器
当几个元素有共同属性的时候，可以使用多元素选择器，用逗号隔开
h1,h2,h3,h4,h5,h6,ol,ul,dl,dd,textarea,form,input,select,body {
margin:0;
padding: 0;
}
多元素选择器
后代选择器作用于父元素下面的所有子元素
#div1 p{
/*把id为div1的下面的所有p元素的字体设置为红色，这里包括id为box的子元素p*/
color: red;
}
<h1>css样式测试</h1>
<div id="div1">
<p>一江春水向东流</p>
<p>飞流直下三千尺</p>
<div id="box">
<p>床前明月光</p>
</div>
</div>
后代选择器
子元素选择器作用于父元素的子元素，
元素选择器与后代选择器的区别在于后代选择器可以作用于子孙元素，
而子元素选择器只能作用于它的子元素 #div1>p{
/*把id为div1的下面的子p元素的字体设置为红色，这里只包含子元素，不包含id为box下面的子元素*/
color: red;
} <h1>css样式测试</h1>
<div id="div1">
<p>一江春水向东流</p>
<p>飞流直下三千尺</p>
<div id="box">
<p>床前明月光</p>
</div>
</div>
子元素选择器
E[attr]匹配所有具有att属性的E元素，不考虑属性的值，例如：input[name],只要有name属性的input元素都会被选中
input[name]{
/*把带有name属性的input元素加上红色边框*/
border: 1px solid red;
}
<form>
<input type="text" name='ipt1' />
<input type="text" name='ipt2' />
<input type="submit" value="提交" />
</form>
E[attr=val]匹配所有attr属性值等于val的E元素，例如:input[name=ipt2]，属性值一般不加引号
input[name]{
/*把带有属性name=ipt1的input元素加上红色边框*/
border: 1px solid red;
}
<form>
<input type="text" name='ipt1' />
<input type="text" name='ipt2' />
<input type="submit" value="提交" />
</form>
E[attr ~=val]， ‘~’包含的意思，只要属性值包含了val的E元素都会被选中
[title~=flower]{
border: 5px solid yellow;
}
<p>title属性中包含单词"flower"的图片会获得黄色边框</p>
<img src="/i/eg_tulip.jpg" title="tulip flower">
<br />
<img src="/i/shanghai_lupu_bridge.jpg" title="lupu bridge">
E[attr =val]，""以某个值开头的意思，只要属性值以val开头的E元素都会被选中
div[class^="test"]{
background-color: red;
}
<div class="first_test">第一个div元素</div>
<div class="second">第二个div元素</div>
<div class="test_three">第三个ddiv元素</div>
E[attr ￥=val]，"$"以某个值结尾的意思，只要属性值以val结尾的E元素都会被选中
div[class￥="test"]{
background-color: red;
}
<div class="first_test">第一个div元素</div>
<div class="second">第二个div元素</div>
<div class="test_three">第三个ddiv元素</div>
属性选择器
a标签的4种状态
- link(未访问链接)
- hover(鼠标放上状态)
- visited(已访问链接)
- active(当前活动链接)
a:link{
color: red;
}
a:visited{
color: blue;
}
a:hover{
color: yellow;
}
a:active{
color: green;
}
<a href="http://nativejs.org">原生js</a>
伪类元素
a:before{
content: "点我";
}
a:after{
content: "!!!";
}
<a href="htpps://www.baidu.com">百度</a>
<p>百度一下你就知道了</p>
<a href="http://nativejs.org">原生js社区</a>
一个使用场景：解决浮动带来的问题
基本属性
/*背景颜色 background-color*/
div{
height: 200px;
width: 200px;
background-color: #ccc;
} /*背景图片 background-image*/
div{
height: 200px;
width: 200px;
background-image: url(img/bg.png);
} /*背景重复 background-repeat*/
div{
height: 200px;
width: 200px;
background-image: url(img/bg.png);
background-repeat: repeat-x;
/*
不添加此属性，则纵向横向都重复
repeat-x 横向重复
repeat-y 纵向重复
no-repeat 不重复
*/
} /*背景位置 background-position*/
background-position: x y;
/*xy分别表示x轴位置和y轴位置*/ /*
横向（left,center,right）
纵向 (top, center,bottom)
*/
背景属性background
/*border-width 边框的宽度*/
div{
border-style: solid;
border-width: 15px; /*边框宽度为15个像素*/
height: 200px;
width: 200px;
} /*border-style 边框样式*/
div{
border-style: dashed;
border-width: 5px;
height: 200px;
width: 200px;
/*
边框风格样式的属性值
none 无边框
solid 直线边框
dashed 虚线边框
dotted 点状边框
double 双线边框
*/
} /*border-color 边框颜色*/
div{
border-style: dashed;
border-width: 5px;
border-color: red; /*边框颜色为红色*/
height: 200px;
width: 200px;
} /*单独设置某边框 border-left|top|right|bottom*/
div{
height: 200px;
width: 200px;
border-left: 1px solid red; /*设置左边框样式*/
} /*border-radius 向元素添加圆角边框*/
//为所有角设置圆角
div{
height: 200px;
width: 200px;
border: 2px solid green;
border-radius: 20px; /*所有角设置圆角的幅度为20px*/
} //后面给两个值
div{
height: 200px;
width: 200px;
border: 2px solid green;
border-radius: 10px 30px; /*上左下右10px, 上右下左30px*/
} //后面给三个值
div{
height: 200px;
width: 200px;
border: 2px solid green;
border-radius: 10px 0 30px; /*上左10px, 上右下左0， 下右30px*/
} //后面给四个值
div{
height: 200px;
width: 200px;
border: 2px solid green;
border-radius: 10px 20px 30px 40px; /*上左,上右,下右,下左*/
} //设置半圆
//把高度设置成宽度的一般，并且只设置下左和下右两个叫的值，设置的值为宽度的一般
div{
height: 100px;
width: 200px;
border: 2px solid green;
border-radius: 0px 0px 100px 100px; /*上左,上右,下右,下左*/
} //设置圆形
//把高度和宽度设置成一样，并把4个圆都设置成宽高一般
div{
height: 200px;
width: 200px;
border: 2px solid green;
border-radius: 50%;
}
边框属性border
/*RGB模式: 红(R)、，绿(G)、蓝(B)每个的取值范围0-255*/
p{
color: rgb(0,255,0);
}
/*RGBA模式: A表示色彩的透明度，取值范围是0-1*/
p{
background-color: rgba(200,255,255,0.5);
}
/*16进制*/
p{
background-color: #ccc;
}
/*颜色名称*/
p{
color: red;
}
颜色属性
/*字体类型 font-family: 可以写多个字体，用“，”隔开，以确保当字体不存在的时候直接用下一个 */
p{
font-familt: 宋体, serif;
} /*字体大小 font-size*/
p{
font-size: 14px;
} /*字体加粗 font-weight: 默认是normal, bold(粗)、bloder(更粗)、lighter(更细)*/
p{
font-weight: bold;
}
字体属性font
/*横行排列 text-align , center居中，left靠左，right靠右 */
p{
text-align: center;
} /*文本行高 line-height*/
p{
text-align: center;
height: 50px;
line-height: 50px ; /*文本行高和盒子高度一致就会垂直居中*/
} /*首行缩进 text-indent*/
p{
text-indent: 50px;
} /*字符间距*/
p{
letter-spacing: 10px;
}
文本属性
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head> <body> <p>
这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p> <p>
这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p> </body> </html>
垂直对齐
第2天-css快速入门的更多相关文章
- CSS快速入门（四）
目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...
- Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...
- Html与CSS快速入门02-HTML基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...
- Html与CSS快速入门03-CSS基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...
- Html与CSS快速入门04-进阶应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...
- HTML/CSS快速入门
Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...
- #001 CSS快速入门讲解
CSS入门讲解 HTML人+CSS衣服+JS动作=>DHTML CSS: 层叠样式表 CSS2.0 和 CSS3.0 版本,目前学习CSS2, CSS3只是多了一些样式出来而已 CSS 干啥用的 ...
- CSS快速入门例子
CSS入门应用 01-结合方式01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- CSS快速入门基础篇，让你快速上手（附带代码案例）
1.什么是CSS 学习思路 CSS是什么 怎么去用CSS(快速上手) CSS选择器(难点也是重点) 网页美化(文字,阴影,超链接,列表,渐变等) 盒子模型 浮动 定位 网页动画(特效效果) 项目格式: ...
- 02-03 CSS快速入门
css四种引入方式:test.html: p{ color: gold; font-size: 20px; } title.html: <!DOCTYPE html> <html l ...
随机推荐
- [BZOJ4212]神牛的养成计划
[BZOJ4212]神牛的养成计划 试题描述 Hzwer 成功培育出神牛细胞,可最终培育出的生物体却让他大失所望...... 后来,他从某同校女神 牛处知道,原来他培育的细胞发生了基因突变,原先决定神 ...
- Python之利用reduce函数求序列的最值及排序
在一般将Python的reduce函数的例子中,通常都是拿列表求和来作为例子.那么,是否还有其他例子呢? 本次分享将讲述如何利用Python中的reduce函数对序列求最值以及排序. 我们用r ...
- HDOJ.2064 汉诺塔III
汉诺塔III Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- Phaser的timer用法
1. 延迟timer,相当于setTimeout game.time.events.add(Phaser.Timer.SECOND*5,this.delayOver,this); 2. 循环timer ...
- mootools框架里如何使用ajax
ajax可通过直接写源码实现,但有点繁琐,现在流行的ajax框架都集成了ajax的功能,而且写起来非常简单方便.当然mootools也不例外.mootools是一个非常优秀的javascript的库, ...
- ntpq –p命令
ntpq用来监视ntpd操作,ntpq -p查询网络中的NTP服务器,同时显示客户端和每个服务器的关系 [root@ ~]# ntpq -p remote refid st t when poll r ...
- javascript中top、clientTop、scrollTop、offsetTop的讲解
下面结合各上图介绍一下各个属性的作用: 一.offsetTop属性: 此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离.所谓的 ...
- WebKit学习资源
1.http://blog.csdn.net/dlmu2001/article/category/741748 红心地瓜 2.http://blog.csdn.net/cnnzp/article ...
- [Book Content]Python进阶
python进阶 原书内容https://github.com/eastlakeside/interpy-zh 通过记录书本目录和大概内容做一个记录,方便以后回顾检索. Chapter Title B ...
- Eclipse工具栏太多，自定义工具栏，去掉调试
Window --> Customize Perspective... --> Tool Bar Visibility 去掉勾选debug Tip:最新版本Customize Persp ...