第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 ...
随机推荐
- 编程技巧 - malloc()与free()
1.要节省ram资源,可以使用malloc()动态申请内存,使用完再用free()释放掉,free()释放的是指针指向的内存空间,而不是指针. 2.如果某个大数组要在两个函数中使用,可以先定义一个全局 ...
- IDEA 使用maven创建web项目，打包war时不会创建class文件
使用maven创建项目后我有创建了个src的目录,导致maven编译不能识别我创建的src文件下的Java文件 修改这样后就可以识别编译Java文件 今天又给自己挖了个坑.......
- deploy a ec2 and join into domain with terraform
Below is the example to convert the ps script into userdata for terraform to create instance and aut ...
- 图论---图的m-点着色判定问题(回溯法--迭代式)
转自 图的m着色问题 图的m-着色判定问题——给定无向连通图G和m种不同的颜色.用这些颜色为图G的各顶点着色,每个顶点着一种颜色,是否有一种着色法使G中任意相邻的2个顶点着不同颜色? 图的m-着色优化 ...
- bzoj 2064 DP
这道题可以抽象成两个数列,将一个数列变换为另一个 数列的代价最小 首先我们可以处理出所有的状态代表,对于每个状态 用二进制来表示,代表的是两个数列中的每一项选还是不选 那么答案最多为n1+n2-2,也 ...
- Runtime类 调用windows程序。
import java.io.*; public class webcyz { /** * @param args */ public static void main(String[] args) ...
- 列出top中的pid
#!/usr/bin/env python import os import string #方法1:通过字符串的isdigits来判断 #filelist = os.listdir('/proc') ...
- MySQL MyISAM优化设置点滴
先说一点问题: Mysql中的InnoDB和MyISAM是在使用MySQL中最常用的两个表类型,各有优缺点.两种类型最主要的差别就是 InnoDB 支持事务处理与外键和行级锁.而MyISAM不支持 ...
- 配置Anaconda的jupyter notebook默认主页
1. 在Anaconda Prompt里输:jupyter notebook --generate-config 然后找到这个文件:C:\Users\{YOUR NAME}\.jupyter\jupy ...
- [ Python - 9 ] 高阶函数map和reduce连用实例
1. 利用map和reduce编写一个str2float函数,把字符串'123.456'转换成浮点数123.456: from functools import reduce def str2num( ...