摘要：这几天临近过年，事情有点多，学习总是段段续续的，今天总算完成了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层叠样式表（结束）的更多相关文章

  1. css系统学习网站

    最近系统学习一下css样式,找到一个不错的网站.http://css.doyoe.com/

  2. DIV+CSS系统学习：转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

  3. HTML+CSS纯干货就业前基础到精通系统学习2016/9/3

    1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像.超链接相关标签,实现图文并茂的页面 (4):会 ...

  4. 【HTML/XML 7】CSS层叠样式表

    导读:上篇博客说到用XSL去实现XML文档的表现形式的美化,那么另外一种方式就是CSS的使用.本篇博客系统的介绍CSS,下篇博客,将系统的介绍XSL. 一.CSS的发展历史 1996年,层叠样式表(C ...

  5. Linux系统学习笔记：文件I/O

    Linux支持C语言中的标准I/O函数,同时它还提供了一套SUS标准的I/O库函数.和标准I/O不同,UNIX的I/O函数是不带缓冲的,即每个读写都调用内核中的一个系统调用.本篇总结UNIX的I/O并 ...

  6. Hibernate的系统 学习

    Hibernate的系统 学习 一.Hibernate的介绍 1.什么是Hibernate? 首先,hibernate是数据持久层的一个轻量级框架.数据持久层的框架有很多比如:iBATIS,myBat ...

  7. 《精通CSS层叠样式表》

    书名 <精通CSS层叠样式表> 图片 时间 2017-7月 学习 感觉和ps一样对我都不友好 3天撸完

  8. amazeui学习笔记--css（基本样式3）--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  9. amazeui学习笔记--css（布局相关3）--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  10. 系统学习 Java IO (十五)----字符读写 Reader/Writer 其他子类

    目录:系统学习 Java IO---- 目录,概览 跟踪行号的缓冲字符输入流 LineNumberReader LineNumberReader 类是一个 BufferedReader ,用于跟踪读取 ...

随机推荐

  1. 模块化CommonJs规范 part1

    CommonJS规范 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 1.概述 Node 应用由模块组成,采用 CommonJS 模块规范. 每个文件就是一个模块, ...

  2. openstack trove weekly meeting时间即将更改

    为了平衡英国.巴黎.德国.美国和中国开发者的作息习惯,openstack trove项目组在5月18日的weekly meeting上开始讨论新的开会时间. 当前的开会时间是,周三 UTC 18:00 ...

  3. Python Learning Day3

    爬虫练习 说是练习,实际是尝试了一些还没有具体了解的方式吧hhhhh' 基于urllib实现 import urllib.request import re url="https://www ...

  4. MySQL中间件介绍

    360 Atlas Atlas是由 Qihoo 360, Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目.它是在mysql-proxy 0.8.2版本的基础上,对其进行了优化 ...

  5. CSS（2）之重新认识 CSS3 新特性

    CSS3选择器(全) 相邻兄弟选择器:+ 选择到紧随目标元素后的第一个元素 普通兄弟选择器:~ 选择到紧随其后的所有兄弟元素 伪类选择器 :link :visited :hover :active : ...

  6. JDK的安装与环境变量配置

    1.下载JDK后安装,此处安装的是JDK8 2.安装后的路径如下图所示,JDK与JRE在同一个文件夹中 3.安装完JDK后配置环境变量  计算机→属性→高级系统设置→高级→环境变量 4.系统变量→新建 ...

  7. 触发器-- 肖敏_入门系列_数据库进阶 60、触发器(三) --youku

    二 https://v.youku.com/v_show/id_XMzkxOTc5NDY0OA==.html?spm=a2h0k.11417342.soresults.dtitle 三 https:/ ...

  8. 《Docekr入门学习篇》——Docker仓库harbor

    Harbor Harbor仓库介绍 我们在日常Docker容器使用和管理过程中,渐渐发现部署企业私有仓库往往是很有必要的, 它可以帮助你管理企业的一些敏感镜像, 同时由于Docker Hub的下载速度 ...

  9. 201609-1 最大波动 Java

    用绝对值,后一天减去前一天即可 import java.util.Scanner; public class Main { public static void main(String[] args) ...

  10. 吴裕雄--天生自然 JAVA开发学习：Scanner 类

    import java.util.Scanner; public class ScannerDemo { public static void main(String[] args) { Scanne ...