系统学习javaweb4----CSS层叠样式表（结束）
摘要：这几天临近过年，事情有点多，学习总是段段续续的，今天总算完成了CSS的基本知识学习。
学习笔记：
西瓜学习javaweb
1.css简述。
1.1 css是什么？有什么作用？
HTML-------》 页面的结构 ------》人的面部（素颜）
CSS--------》 美化页面 ------》给人化妆
CSS（Cascading Style Sheets）：层叠样式表
层叠：一层一层叠加
样式表：存储样式的地方，多个样式
就好像：给一个人的面部化妆， 画口红， 画眼影， 打粉底。
HTML标签， 样式1， 样式2， 样式3。
CSS通常称为CSS样表或层叠样式表，主要用于设置HTML页面的文本内容（字体、大小、对其方式等）、图片的外形（高度、宽度、边框样式、边距等）以及版面的布局等外观显示样式。
CSS可以使HTML页面更加好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更加灵活，更容易绘制出用户需要的结构。
CSS作用：修饰HTML页面，更加丰富多彩地展示超文本信息。
1.2 CSS入门案例
<font size="7">今天天气好晴朗</font><br/>
<font style="font-size:120px;">今天天气好晴朗</font>
1.3为什么实用CSS代替HTML属性设置样式
因为HTML属性在单独使用时有一定的局限性，所以要配合CSS样式代码才可以展示更为丰富的效果。
1.4 CSS代码规范
放置规范：
在<style>标签的内容体中书写CSS样式代码
<style>标签放置在<head>标签之中。
格式规范：
选择器名称{属性名1：属性值；属性名2：属性……}
选择器：即指定CSS样式作用在哪些HTML标签上。
代码规范：
属性名和属性值之间是键值对关系；
属性名和属性值之间 用“：”连接，最后“:”结尾；
如果一个属性有多个值，多个值之间用 空格 隔开。
CSS注释：/*注释内容*/ 等同于java的多行注释
例如：
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
/*如果一个属性名有多个值，多个值之间用 空格 隔开。*/
span{
font-size:12px;
color:pink;
border:1px solid blue;
}
</style>
</head>
<body>
<!-- <span>是行级别的块标签 -->
<span>德玛西亚无可匹敌！</span> <br/>
<span>诺克萨斯即将崛起！</span>
</body>
2.CSS选择器
2.1基本选择器
2.1.1 元素选择器
HTML标签又名HTML元素。
元素选择器：即以HTML标签名作为选择器名称。
作用：选择CSS样式代码 作用于 对应标签名的标签上。
格式：
标签名：{
/*CSS样式代码*/
}
适用范围：适用于将相同样式 作用在多个同名标签上
例如：
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
/*如果一个属性名有多个值，多个值之间用 空格
隔开。*/
span{
font-size:12px;
color:pink;
border:1px solid blue;
}
</style>
</head>
<body>
<!--
<span>是行级别的块标签 -->
<span>德玛西亚无可匹敌！</span> <br/>
<span>诺克萨斯即将崛起！</span>
<div>德玛西亚无可匹敌！</div>
<div>诺克萨斯即将崛起！</div>
</body>
2.1.2类选择器
每个HTML标签都有一个class属性，class属性值即为类名。
类选择器：即以HTML的类名（class属性值）作为选择器名称。
作用：选择CSS样式代码 作用于
对应类名HTML标签。
格式：
.类名{
/*CSS样式代码*/
}
适用范围：适用于将样式 一次作用在相同类名的标签上。
例如：
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
/*如果一个属性名有多个值，多个值之间用 空格
隔开。*/
.redF
{
color:red
}
</style>
</head>
<body>
<!--
<span>是行级别的块标签 -->
<span>span1我是黑色字体</span> <br/>
<span class="redF">span2我是红色字体</span>
<div>div1我是黑色字体</div>
<div class="redF">div2我是红色字体</div>
</body>
2.1.3 ID选择器
每个HTML标签都有一个id属性，id属性值必须在本页面是惟一的。
id选择器：即以HTML标签都有一个id属性，id属性值必须在本页面是惟一的。
作用：选择CSS样式代码 作用于 某个规定id值得HTML标签上
格式：
#id值{
/*CSS样式代码*/
}
适用范围：适用于将样式 作用某个标签上。
注意：必须手动保证ID值在本页面唯一。
2.2基本选择器的组合方式
2.2.1层级关系
标签和标签之间有层级关系，例如<html>标签的子标签为<body>标签。
我们可以对基本选择器进行组合，表现出层级刮吸，从而更加针对性地把样式作用于某些标签上。
格式：
选择器1 选择器2……{
/*CSS代码*/
}
意义：包裹关系 选择器1下的选择器2
例如：
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
div font{
color:red;
}
</style>
</head>
<body>
<div>
<font>我想变红</font>
</div>
<font>而我想保持黑色</font>
</body>
</html>
3.1边框属性
所有HTML标签都有边框，默认边框不可见。
3.1.1
border
设置边框的样式：
格式：宽度 样式 颜色
例如：border：1px solid red，1像素粗 实线 红色边框。
线条样式：solid 实线，none无边，double 双线
3.1.2
width
用于设置标签的宽度。、
3.1.3
height
用于设置标签的高度。
3.1.4
background-color
用于设置标签的背景颜色
背景颜色设置的两种主流方式：
a.英文单词 例如：red，blue，yellow
b.颜色代码 格式：#红黄蓝，每个颜色用两个十六进制位数表示。
例如：#ff1100 红色ff 绿色11 蓝色00，红色颜色最重，绿色其次，没有蓝色。
例如：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
div{
border:1px solid red;
width:300px;
height:300px;
background-color:#ff1100;
}
</style>
</head>
<body>
<div>我是边框代码</div>
</body>
</html>
3.2布局
3.2.1 float
通常默认的排版方式，将页面中的元素从上到下一一罗列，从实际开发中，需要左右方式进行排版，就需要用到浮动属性。
格式：
选择器{float:属性值;}
常用属性值：
none：元素不浮动；
left：元素向左浮动；
right：元素向右浮动；
注意：因为元素设置浮动属性后，会脱离原有的文档流（会脱离原有的板式），从而影响其他元素的样式，所以设置浮动以后页面样式需要重新调整。
例如：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
#d1{
background-color:red;
width:100px;
height:100px;
}
#d2{
background-color:green;
width:110px;
height:110px;
}
#d3{
background-color:blue;
width:120px;
height:120px;
}
div{
float:left
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
例如：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
#d1{
background-color:red;
width:100px;
height:100px;
float:left;
}
#d2{
background-color:green;
width:110px;
height:110px;
float:left;
}
#d3{
background-color:blue;
width:120px;
height:120px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
3.3转换
3.3.1
display
HTML提供了丰富的标签，这些标签被定义成了不同的类型，一般分为：块级元素和行内元素。
块元素：以区域块方式出现。每个块标签独自占据一整行或多整行，块结束会自动换行（根据这点来判断）。
常见的块元素：<h1>、<p>、<div>、<ul>等。
行内元素：根据内容多少来占用行内空间，不会自动换行。
常见的航呢元素：<span>、<a>等
display属性可以使得元素 在行内元素和块元素之间相互转换。
格式：
选择器：{display：属性值}
常见的属性值：
block：此元素将显示为块元素（块元素默认的display属性值）
inline：此元素将显示为行内元素（行内元素默认的display属性值）
none：此元素将被隐藏，不显示，也不要占用页面空间。
例如：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
div{
display:inline;
}
li{
display:none;
}
span{
display:block;
}
</style>
</head>
<body>
<h1>块级元素1-div-由块元素装换为行内元素（不自动换行）</h1>
<div id="d1">div1</div>
<div>div2</div>
<h1>块级元素2-无序列表</h1>
<ul>
<li>德玛西亚</li>
<li>诺克萨斯</li>
<li>救赎之地</li>
</ul>
<h1>行内元素-span</h1>
<span>span1</span>
<span>span2</span>
</body>
</html>
3.4 字体
font-size：用于设置字体大小。可以设置像素。
color：用于设置字体的颜色。
4.CSS盒子模型
所有的HTML元素，我们都可以看成一个四边形，即一个盒子。
用CSS来设置元素盒子的 内边距、边框和外边距
的样式的方式。
相当于设置盒子的样式，所以我们将其称之为 盒子模型。
4.2边框(border回顾和再阐述)
边框：HTML元素的框体
上边框：border-top
下边框：border-bottom
左边框：border-left
右边框：border-right
整边框：border
4.3内边距 padding
内边距有四个属性可以设置：
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
通用性设置：
一次性设置上下左右内边距为 px
padding： px；
4.4外边距margin
外边距：HTML元素边框 到 其他HTML元素边框的距离。
外边距有四个属性可以设置：
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
通用性设置：
一次性设置外边距为 px
margin：20px；
例如：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
#div1{
border-left:1px solid red;
border-right:1px solid yellow;
border-top:1px solid
blue;
border-bottom:1px solid green;
padding:100px;
}
#div2{
border:2px solid red;
margin-top:20px;
}
</style>
</head>
<body>
<div id="div1">内容体</div>
<div id="div2">内容体</div>
</body>
</html>
5.CSS和HTML结合方式
行内样式，是通过标签的Style属性来设置元素的样式。
格式：
<HTML标签 style=“CSS样式代码”/>
示例：
<body>
<a style="font-size:100px; border:10px solid red; ">德玛西亚</a>
</body>
5.1.2 <style></style>标签样式
当某些样式在页面中被多个标签重复使用，为了编码更加灵活，避免书写重复代码，我们将样式代码从标签style属性中抽取出来，统一写到style标签中。
格式：
<style>
CSS样式代码
</style>
5.2外部样式。
系统学习javaweb4----CSS层叠样式表（结束）的更多相关文章
- css系统学习网站
最近系统学习一下css样式,找到一个不错的网站.http://css.doyoe.com/
- DIV+CSS系统学习：转载
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
- HTML+CSS纯干货就业前基础到精通系统学习2016/9/3
1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像.超链接相关标签,实现图文并茂的页面 (4):会 ...
- 【HTML/XML 7】CSS层叠样式表
导读:上篇博客说到用XSL去实现XML文档的表现形式的美化,那么另外一种方式就是CSS的使用.本篇博客系统的介绍CSS,下篇博客,将系统的介绍XSL. 一.CSS的发展历史 1996年,层叠样式表(C ...
- Linux系统学习笔记：文件I/O
Linux支持C语言中的标准I/O函数,同时它还提供了一套SUS标准的I/O库函数.和标准I/O不同,UNIX的I/O函数是不带缓冲的,即每个读写都调用内核中的一个系统调用.本篇总结UNIX的I/O并 ...
- Hibernate的系统 学习
Hibernate的系统 学习 一.Hibernate的介绍 1.什么是Hibernate? 首先,hibernate是数据持久层的一个轻量级框架.数据持久层的框架有很多比如:iBATIS,myBat ...
- 《精通CSS层叠样式表》
书名 <精通CSS层叠样式表> 图片 时间 2017-7月 学习 感觉和ps一样对我都不友好 3天撸完
- amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- 系统学习 Java IO (十五)----字符读写 Reader/Writer 其他子类
目录:系统学习 Java IO---- 目录,概览 跟踪行号的缓冲字符输入流 LineNumberReader LineNumberReader 类是一个 BufferedReader ,用于跟踪读取 ...
随机推荐
- Mybatis实现条件查询（三）
1. 准备 请先完成Mybatis基本配置(一)的基本内容 2. 疑问 我们再Mybatis基本配置(一)中实现了按照商品ID进行查询商品信息,可是在实际应用中却很少出现根据ID来查询商品的情况.因为 ...
- ES7之async/await
async 是 ES7 才有的与异步操作有关的关键字. async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数. async function helloAsync(){ ...
- codeforces 596 C. p-binary
题意:给你一个n和一个p,让你用 (2k+p)进制来表示n,找出用最少的(2k+p)来表示n. 分析:首先我们看到2k,首先下想到二进制,我们可以我们列出式子,也就是 (2x1 + p)+(2x2 + ...
- Windbg 实践之符号篇
How to display the size value 1)一开始不会加载,chksym 了一下就加载了. 2) 新版本已经可以显示size的大小了 3)?? 显示变量的类型 4)x std::v ...
- 再谈记忆化搜索 HDU-1078
最近做DP题目,发现无论是LCS,还是有些题目涉及将动态规划的路径打印出来,而且有时候还要按格式输出,这个时候,记忆化搜索显得尤其重要,确实,记忆化搜索使用优化版本的动态规划,用起来思路清晰,非常方便 ...
- cmd 删除整个目录
rmdir 删除整个目录好比说我要删除 222 这个目录下的所有目录和档案,这语法就是: rmdir /s/q 222 其中: /s 是代表删除所有子目录跟其中的档案. /q 是不要它在删除档案或目录 ...
- cuda addressMode解析
cudaAddressModeClamp:超出范围就用边界值代替,示意: AA | ABCDE | EE cudaAddressModeBorder:超出范围就用零代替,示意: 00 | ABCDE ...
- 18 11 11 网络通信大都数使用的方式 socket
---恢复内容开始--- 浏览器 和 聊天工具 一般都用socket socket 在不同的 语言中的使用流程都大同小异 收 发 关闭 import socket def len() ...
- sklearn 模型评估
原文链接 http://d0evi1.com/sklearn/model_evaluation/ 预测值:pred 真实值:y_test #### 直接用平均值 ``` mean(pred == y_ ...
- 洛谷P4071-[SDOI2016]排列计数 题解
SDOI2016-排列计数 发现很多题解都没有讲清楚这道题为什么要用逆元.递推公式怎么来的. 我,风雨兼程三十载,只为写出一篇好题解. 还是我来造福大家一下吧. 题目大意: 一个长度为 n 且 1~n ...