html+css快速入门教程（3）
练习：
1、画盒子 2、相框
5 基础选择器
5.1 id选择器
ID选择器与类选择器的定义与引用方式类似，只是定义的符号不一样。ID通常表示唯一值，因此，ID选择器在CSS 中通常只出现一次。如果出现多次也能解析，但是不建议这样使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#box{
width:100%;
height:100px;
backgroud:black;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
5.2 类选择器
类（class）选择器就是将相同类型的元素进行分类定义，分类定义的好处就是能够复用。在类名前面加符号”.”，表示定义一个类选择器，引用的时候在标签后面加class 引用 ；例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box{
width:100%;
height:100px;
backgroud:blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
5.3 标签选择器
标签选择器就是直接使用HTML标签名称作为CSS选择器的名称，这种方式会影响HTML中所有此标签的样式；例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 100%;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
6 基本属性
6.1 颜色表示方式
RGB模式，红(R)、绿(G)、蓝(B) 每个的取值范围0~255，color：rgb（0,255,0）
p{
/*设置字体颜色伪绿色*/
color：rgb（0,255,0）;
}
RGBA模式，RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的(色彩空间)透明度，color：rgba（255,255,255,0.5)；A 透明度的取值范围是0-1
p{
background-color：rgba（255,255,255,0.5）
}
16进制，用16进制表示颜色值，如#FF0000,#00FF00，可以简写成#F00，#0F0;
#div{
background-color:#ccc;
}
颜色名称,直接用颜色名称表示颜色，如：red、green、blue、yellow等等
p{
color:red;
}
6.2 边框相关属性
border-width 设置4边框的宽度
p{
border-style:solid;
border-width:15px;
}
border-style设置4边框样式
p {
border-style:solid;
}
/*
边框风格样式的属性值:
none 无边框
solid 直线边框
dashed 虚线边框
dotted 点状边框
double 双线边框
*/
border-color 设置边框颜色
p {
border-color:red;
}
border简写
p{
border:1px solid red;
}
单独设置某边框
border-left、border-top、border-right、border-bottom
p{
border-left:1px solid red;
}
border-radius 向元素添加圆角边框
/*为所有角都设置圆角*/
border-radius:20px;
/*border-radius 后面给两个值*/
border-radius:0px 10px; /* 0px表示上左下右两个角 10px 上右下左两个角*/
/*border-radius 后面给3个值*/
border-radius:10px 0px 20px; /*10上左 0px 上右下左 20px 下右 */
/*border-radius 后面给4个值*/
border-radius:5px 10px 15px 20px ; /*上左 上右 下右 下左 */
/*设置半圆
把高度设置成宽度的一半 并且只设置下左和下右两个角的值 //设置的值为宽度的一半*/
.box{
width: 100px;
height: 50px;
border-radius:0px 0px 50px 50px ; /*上左 上右 下右 下左 */
}
/*
设置圆形
把高度和宽度设置成一样，并且把四个圆都设置成宽高的一半
*/
.box{
width: 100px;
height: 100px;
border-radius:50% ;
}
注意：单位不仅可以用px 还可以用百分比 %
6.3 背景相关属性
背景颜色 background-color
p{
background-color:#ccc;
}
背景图片 background-image
语法：
background-image:url(图片路径)
背景重复 background-repeat
语法：
background-repeat:repeat-x|repeat-y|no-repeat;
重复平铺满 repeat;向Y轴重复 repeat-y;向X轴重复 repeat-x;不重复 no-repeat;
背景位置 background-position
横向（left,center,right）;
纵向（top,center,bottom
语法：
/*xy分别代表x轴位置和y轴位置*/
background-position: x y;
6.4 字体相关属性
font-family 定义字体，font-family：宋体，serif；可以使用“，”隔开，以确保当字体不存在的时候直接使用下一个
p{
font-family：宋体，serif;
}
font-size 设置字体大小
p{
font-size:14px;
}
font-weight 字体加粗
font-weight:normal;normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)
p{
font-weight:bold;/*加粗字体*/
}
color 设置字体颜色
p{
color:red;
}
6.5 文本相关属性
text-align,横行排列，值：center 居中，left靠左，right 靠右
p{
text-align:center;
}
line-height 文本行高
p{
text-algin:center;
height:50px;
line-height:50px;/*文本行高和盒子高度一致就会垂直居中*/
}
text-indent 首行缩进
p{
text-indent:50px;
}
letter-spacing 字符间距
p{
letter-spacing:10px;
}
螺钉课堂视频课程地址：http://edu.nodeing.com
html+css快速入门教程（3）的更多相关文章
- html+css快速入门教程（5）
练习: 1.画盒子1 2.画盒子2 3.京东特色购物 4.京东发现好货 5.京东玩3c 7.3 定位 通过使用 position 属性,我们可以选择 3 种不同类型的定位,这会影响元素框生成的方式. ...
- html+css快速入门教程（4）
练习 1.网易考拉下拉菜单 2.爱奇艺新闻 3.ps滤镜菜单 4.爱奇艺列表 7 布局 7.1 盒子模型 网页设计,首先要做好整体的布局,网页布局就是将不同的元素按照一定的规则放置在浏览器的不同位置, ...
- html+css快速入门教程（2）
3 标签 3.1 div div 标签表示一个区块或者区域,你可以把它看成是一个容器,比如说一个 竹篮 作用:用来把网页分块 并且里面可以装任意的html元素 <div>这里是一个div容 ...
- html+css快速入门教程（6）
9 综合实例 仿百度云盘下载页面实战 10 表格 10.1 table table 为表格标签 可以让我们的表格在浏览器中显示 table 下面还有两个常用标签 tr 和 td tr表示一行 td表示 ...
- html+css快速入门教程（1）
1 HTML简介 1.1. 什么是HTML?(了解) HTML是超文本标记语言(HyperText Markup Language,HTML)的缩写.是标准通用标记语言(SGML Standard G ...
- laravel 中CSS 预编译语言 Sass 快速入门教程
CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...
- 专为设计师而写的GitHub快速入门教程
专为设计师而写的GitHub快速入门教程 来源: 伯乐在线 作者:Kevin Li 原文出处: Kevin Li 在互联网行业工作的想必都多多少少听说过GitHub的大名,除了是最大的开源项目 ...
- EntityFramework6 快速入门教程
EntityFramework6 快速入门教程 不得不说EF在国内实在是太小众,相关的技术文章真实屈指可数,而且很多文章都很旧了,里面使用的版本跟如今的EF6差别还是比较大.我刚开始弄这个的时候真是绕 ...
- Apple Watch开发快速入门教程
Apple Watch开发快速入门教程 试读下载地址:http://pan.baidu.com/s/1eQ8JdR0 介绍:苹果为Watch提供全新的开发框架WatchKit.本教程是国内第一本A ...
随机推荐
- Java实现 蓝桥杯 算法训练 Rotatable Number（暴力）
试题 算法训练 Rotatable Number 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 Bike是个十分喜欢数学的聪明孩子.他发明了"可旋转数",其灵感 ...
- Java实现 LeetCode 673 最长递增子序列的个数（递推）
673. 最长递增子序列的个数 给定一个未排序的整数数组,找到最长递增子序列的个数. 示例 1: 输入: [1,3,5,4,7] 输出: 2 解释: 有两个最长递增子序列,分别是 [1, 3, 4, ...
- Java实现 蓝桥杯 算法训练 动态数组使用
算法训练 动态数组使用 时间限制:1.0s 内存限制:512.0MB 提交此题 从键盘读入n个整数,使用动态数组存储所读入的整数,并计算它们的和与平均值分别输出.要求尽可能使用函数实现程序代码.平均值 ...
- Java实现 POJ 2749 分解因数（计蒜客）
POJ 2749 分解因数(计蒜客) Description 给出一个正整数a,要求分解成若干个正整数的乘积,即a = a1 * a2 * a3 * - * an,并且1 < a1 <= ...
- java实现棋盘上的麦子
** 棋盘上的麦子** 你一定听说过这个故事.国王对发明国际象棋的大臣很佩服,问他要什么报酬,大臣说:请在第1个棋盘格放1粒麦子,在第2个棋盘格放2粒麦子,在第3个棋盘格放4粒麦子,在第4个棋盘格放8 ...
- java代码（5） ---guava之Multiset
guava之Multiset 一.概述 Guava提供了一个新集合类型Multiset,它可以多次添加相等的元素,且和元素顺序无关,Multiset继承于JDK的Collection接口,而不是Se ...
- Mybatis多表操作
一:引言 在学习完前面的mybatis基本语法后,大家都有个认知,这个Mybatis太强大了,比之前使用JDBC写方便多了,但是你们当初在使用原生JDBC写SQL查询的时候有没有遇到过多表查询呢?肯定 ...
- Grafana 插件地图Worldmap不显示
介绍 最近上了ELK 日志分析,想着手看下用户的分布情况,在kibana 中展示用户分布情况是没有问题的,但是索引添加到Granfana 中的话就无法展示. 问题描述 添加ES索引以后,map地图一片 ...
- ModelAndView的部分回顾
ModelAndView的部分回顾 //@RestController @Controller //@SessionAttributes("user") //把modelandvi ...
- 8000字长文让你彻底了解 Java 8 的 Lambda、函数式接口、Stream 用法和原理
我是风筝,公众号「古时的风筝」.一个兼具深度与广度的程序员鼓励师,一个本打算写诗却写起了代码的田园码农! 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在 ...