第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 ...
随机推荐
- APP兼容性测试
一.APP兼容性范围以及问题 1.硬件 各个硬件结构 2.软硬件之间 硬件dll库(C++) 软硬件之间的通信,各个厂商提供的ROM 3.软件 浏览器.操作系统.数据库.手机.功能兼容性(功能修改,二 ...
- 自建git服务器搭建使用记录
git在push的时候出现insufficient permission for adding an object错误 //解决方法,在git库的目录下 //明明一开始创建user的时候有执行这个命令 ...
- [51nod1009]数字1的数量
解题关键:数位dp,对每一位进行考虑,通过过程得出每一位上1出现的次数 1位数的情况: 在解法二中已经分析过,大于等于1的时候,有1个,小于1就没有. 2位数的情况: N=13,个位数出现的1的次数为 ...
- {CodeForces】788E New task && 汕头市队赛SRM06 D 五色战队
D 五色战队 SRM 06 背景&&描述 游行寺家里人们的发色多种多样,有基佬紫.原谅绿.少女粉.高级黑.相簿白等. 日向彼方:吾令人观其气,气成五彩, ...
- Vue 还是 React 还是 Angular ？
有空的时候还是把3个都熟悉一下.除了Angular学习起来笔记花时间外.React跟Vue没啥难度,学习用的时间不多. 如果你在Google工作:Angular如果你喜欢TypeScript:Angu ...
- Linux 工作站安全加固规范
目标受众 这是一套 Linux 基金会为其系统管理员提供的推荐规范. 这个文档用于帮助那些使用 Linux 工作站来访问和管理项目的 IT 设施的系统管理员团队. 如果你的系统管理员是远程员工,你也许 ...
- Linux ssh的使用
1.查看SSH客户端版本 有的时候需要确认一下SSH客户端及其相应的版本号.使用ssh -V命令可以得到版本号.需要注意的是,Linux一般自带的是OpenSSH: 下面的例子即表明该系统正在使用Op ...
- UVALIVE 2686 Stargates
尼玛真深坑合时p[x] = y 就RE,p[y] = x 就AC . #include <map> #include <set> #include <list> # ...
- JMeter 定时器（Synchronizing Timer）之集合点应用
性能测试中我们经常提到一个概念就是“并发”,其实在实际真实的性能测试中是不存在真正的并发的.为了更真实的模拟对一个请求的并发测试场景,我们通常设置一个集合点,JMeter中提供了这样的一个功能设置. ...
- golang写一个简单的爬虫
package main import( "fmt" "io/ioutil" "net/http" ) func gethtml(url s ...