第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 ...
随机推荐
- ListView获取网络数据并展示优化练习
权限: <uses-permission android:name="android.permission.INTERNET"></uses-permission ...
- HDU1213：How Many Tables（并查集）
How Many Tables Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- Linux Top 命令参数解析
转载自:http://www.jb51.net/LINUXjishu/34604.html TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户 ...
- 串的模式匹配算法(求子串位置的定位函数Index(S,T,pos))
串的模式匹配的一般方法如算法4.5(在bo4-1.cpp 中)所示:由主串S 的第pos 个字 符起,检验是否存在子串T.首先令i 等于 pos(i 为S 中当前待比较字符的位序),j 等于 1(j ...
- Spring学习--xml 中 Bean 的自动装配
Spring IOC 容器可以自动装配 Bean. 只要在 <bean> 的 autowire 属性里指定自动装配的模式. byName(根据名称自动装配):必须将目标 Bean 的名称和 ...
- Python基础（9）三元表达式、列表解析、生成器表达式
一.三元表达式 三元运算,是对简单的条件语句的缩写. # if条件语句 if x > f: print(x) else: print(y) # 条件成立左边,不成立右边 x if x > ...
- GML3示例
GML3示例:https://svn.osgeo.org/geotools/trunk/modules/extension/xsd/xsd-gml3/src/test/resources/org/ge ...
- MDIO/MDC(SMI)接口-leonwang202
ChinaUnix博客 http://blog.chinaunix.net/uid-24148050-id-132863.html
- 【poj3294-不小于k个字符串中最长公共子串】后缀数组
1.注意每两个串之间的连接符要不一样. 2.分组的时候要注意最后一组啊!又漏了! 3.开数组要考虑连接符的数量.100010是不够的至少要101000. #include<cstdio> ...
- 【BZOJ】1579: [Usaco2009 Feb]Revamping Trails 道路升级
[算法]分层图最短路 [题解] 考虑k层一模一样的图,然后每个夹层都在每条边的位置新加从上一层跨越到下一层的边权为0的边,这样至多选择k条边置为0. 然后考虑方便的写法. SPFA 第一次SPFA计算 ...