练习：

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）的更多相关文章

  1. html+css快速入门教程（5）

    练习: 1.画盒子1 2.画盒子2 3.京东特色购物 4.京东发现好货 5.京东玩3c 7.3 定位 通过使用 position 属性,我们可以选择 3 种不同类型的定位,这会影响元素框生成的方式. ...

  2. html+css快速入门教程（4）

    练习 1.网易考拉下拉菜单 2.爱奇艺新闻 3.ps滤镜菜单 4.爱奇艺列表 7 布局 7.1 盒子模型 网页设计,首先要做好整体的布局,网页布局就是将不同的元素按照一定的规则放置在浏览器的不同位置, ...

  3. html+css快速入门教程（2）

    3 标签 3.1 div div 标签表示一个区块或者区域,你可以把它看成是一个容器,比如说一个 竹篮 作用:用来把网页分块 并且里面可以装任意的html元素 <div>这里是一个div容 ...

  4. html+css快速入门教程（6）

    9 综合实例 仿百度云盘下载页面实战 10 表格 10.1 table table 为表格标签 可以让我们的表格在浏览器中显示 table 下面还有两个常用标签 tr 和 td tr表示一行 td表示 ...

  5. html+css快速入门教程（1）

    1 HTML简介 1.1. 什么是HTML?(了解) HTML是超文本标记语言(HyperText Markup Language,HTML)的缩写.是标准通用标记语言(SGML Standard G ...

  6. laravel 中CSS 预编译语言 Sass 快速入门教程

    CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...

  7. 专为设计师而写的GitHub快速入门教程

    专为设计师而写的GitHub快速入门教程 来源: 伯乐在线 作者:Kevin Li     原文出处: Kevin Li 在互联网行业工作的想必都多多少少听说过GitHub的大名,除了是最大的开源项目 ...

  8. EntityFramework6 快速入门教程

    EntityFramework6 快速入门教程 不得不说EF在国内实在是太小众,相关的技术文章真实屈指可数,而且很多文章都很旧了,里面使用的版本跟如今的EF6差别还是比较大.我刚开始弄这个的时候真是绕 ...

  9. Apple Watch开发快速入门教程

     Apple Watch开发快速入门教程  试读下载地址:http://pan.baidu.com/s/1eQ8JdR0 介绍:苹果为Watch提供全新的开发框架WatchKit.本教程是国内第一本A ...

随机推荐

  1. 【大厂面试03期】MySQL是怎么解决幻读问题的？

    问题分析 首先幻读是什么? 根据MySQL文档上面的定义 The so-called phantom problem occurs within a transaction when the same ...

  2. DynamIQ扫盲文

    综述: ARM CPU的架构都基于big.LITTLE大小核技术.而再big.LITTLE的基础上,又添加了DynamIQ.单一Cluster中可以又8个core,且支持不同架构的core,以及支持不 ...

  3. Java实现 LeetCode 355 设计推特

    355. 设计推特 设计一个简化版的推特(Twitter),可以让用户实现发送推文,关注/取消关注其他用户,能够看见关注人(包括自己)的最近十条推文.你的设计需要支持以下的几个功能: postTwee ...

  4. Java实现 LeetCode 216. 组合总和 III（三）

    216. 组合总和 III 找出所有相加之和为 n 的 k 个数的组合.组合中只允许含有 1 - 9 的正整数,并且每种组合中不存在重复的数字. 说明: 所有数字都是正整数. 解集不能包含重复的组合. ...

  5. java实现取球游戏

    /* 今盒子里有 n 个小球,A.B 两人轮流从盒中取球,每个人都可以看到另一个人取了多少个, 也可以看到盒中还剩下多少个,并且两人都很聪明,不会做出错误的判断. 我们约定: 每个人从盒子中取出的球的 ...

  6. java实现第四届蓝桥杯空白格式化

    空白格式化 本次大赛采用了全自动机器测评系统. 如果你的答案与标准答案相差了一个空格,很可能无法得分,所以要加倍谨慎! 但也不必过于惊慌.因为在有些情况下,测评系统会把你的答案进行"空白格式 ...

  7. Java实现第八届蓝桥杯青蛙跳杯子

    青蛙跳杯子 题目描述 X星球的流行宠物是青蛙,一般有两种颜色:白色和黑色. X星球的居民喜欢把它们放在一排茶杯里,这样可以观察它们跳来跳去. 如下图,有一排杯子,左边的一个是空着的,右边的杯子,每个里 ...

  8. Java基础（十）

    一.XML概述 属性文件是用来描述程序配置,属性文件包含了一组名/值对.属性文件采用的是一种单一的平面层次结构,同时属性文件要求键是唯一的. XML格式能够表达层次结构,并且重复的元素不会被曲解. H ...

  9. 别在重复造轮子了，几个值得应用到项目中的 Java 开源库送给你

    我是风筝,公众号「古时的风筝」.文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在里面.公众号回复『666』获取高清大图. 风筝我作为一个野路子开发者,直到 ...

  10. WDCP配置ThinkPHP5伪静态隐藏index.php，出现“”解决重定向次数过”问题

    站点域名的配置:xxx.com.conf server { listen 80; root /www/web/xxx_com/public_html; server_name xxx.com; ind ...