第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 ...
随机推荐
- [洛谷P4238]【模板】多项式求逆
题目大意:多项式求逆 题解:$ A^{-1}(x) = (2 - B(x) * A(x)) \times B(x) \pmod{x^n} $ ($B(x)$ 为$A(x)$在$x^{\lceil \d ...
- [POJ 1204]Word Puzzles(Trie树暴搜&AC自己主动机)
Description Word puzzles are usually simple and very entertaining for all ages. They are so entertai ...
- 【莫比乌斯反演】51nod1594 Gcd and Phi
题解 显然可以O(nlogn)计算 代码 //by 减维 #include<set> #include<map> #include<queue> #include& ...
- github导入springboot maven项目
1.在GitHub里force喜欢的项目,获取GitHub项目地址,eclipse---import---project from git---clone uri---next---finish,项目 ...
- Array.slice(start,end)的用法
start在start>=0,假设start=0,表示从数组的第一个元素开始截取,start=2,表示从数组的第二个元素开始截取,依次类推. 在start<0时,start=-1表示从倒数 ...
- bzoj4589 FWT xor版本
4589: Hard Nim Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 865 Solved: 484[Submit][Status][Disc ...
- VC++使用CImage PNG转BMP图片透明背景处理
PNG格式的图片是支持透明通道的,BMP格式的图片是没有透明通道的,所以当PNG格式的图片转换为BMP格式时,对于PNG图片的透明背景就需要进行特别的处理. VC++中的HBITMAP是支持透明色的, ...
- Js+CSS3实现手风琴效果
效果截图: HTML代码: <div id="container"> <img src="images/photo01.jpg" alt=&q ...
- JRE集成到Tomcat
将jdk集成到tomcat里面(不用客户安装JRE) 或者 tomcat使用指定的jdk_ 给客户安装软件的时候,也许客户不想你在人家机器的环境变量里设置来设置去,那么就要在tomcat里指定要使用的 ...
- Ubuntu下kafka集群环境搭建及测试
kafka介绍: Kafka[1是一种高吞吐量[2] 的分布式发布订阅消息系统,有如下特性: 通过O(1)的磁盘数据结构提供消息的持久化,这种结构对于即使数以TB的消息存储也能够保持长时间的稳定性能 ...