CSS样式

概述：CSS【Cascading Style Sheets】全称层叠样式表。

理解：可以把HTML文件想向成是一个房子骨架，里面标签（块元素、行内元素）理解为搭建房子转，CSS负责美化房子（进行装修）,让你的静态页面（网站看的相对好看一些）

内部样式

体验样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><!-- 样式一般是需要放在style标签里面 --><style type="text/css">div{color:green;font-size:30px;background-color:red;text-align:center;border:5px solid black;opacity:.5;}</style>
</head>
<body><div>我是祖国的老花骨朵</div>
</body>
</html>

标签选择器

概述：样式【CSS】用来美观标签（页面），web领域样式分为三种：外部样式，内部样式，行内样式

内部样式需要书写在head中，利用子元素双闭合标签style标签完成。

语法格式：

<style type=”text/css”>标签名字{属性:属性值;属性：属性值;属性：属性值;
}
<style>

实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><style type="text/css">h1{/* 文字颜色:属性值红、橙、黄、绿、青、蓝、紫色等等 */color:skyblue;/* 字体大小设置 */font-size:16px;/* 背景颜色设置 */background-color:orange;/* 文本对齐方式 */text-align:center;/* 字体样式设置 */font-style:italic;}div{background-color:red;font-size:28px;color:cyan;text-align:center;font-style:italic;/* 透明度设置：透明度属性值范围0~1 */opacity:1;/* 光标防止标签中:变为小手; */cursor:pointer;}</style>
</head>
<body><h1>我是一级标题</h1><h1>我是小明呀</h1><div>我是常用布局标签</div>
</body>
</html>

标签选择器：常用样式中选择匹配标签

id选择器

命名标识符规范：

1:可以数字、字母、下划线、美元符号

2:但是不能以数字开头

3：不能是这门语言当中关键字、保留字

概述:我们上面案例通过标签名字匹配页面中对应标签进行设置(内部样式）,除此之外还可以通过id选择器匹配标签（节点:element）；

注意：一般情况下，页面中标签id属性值唯一（和人的身份证是一样的，没人都有一个但是都不同）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">#box{color:cyan;/*文本描述*/text-decoration: none;}</style>
</head>
<body><a href="http://www.baidu.com" id="box">百度</a>
</body>
</html>

在标签（开始标签）这里添加一个id属性，对应右侧属性值
在style标签里面（内部样式）#号+对应节点id的属性值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>id选择器</title><style type="text/css">#box{color:black;/* 文本描述 */text-decoration:none;}#box1{/* 列表默认样式设置 */list-style:square;}#cur{color:cyan;}#box2{/* 列表默认样式设置 */list-style:square;}</style>
</head>
<body><a href="http://www.baidu.com" id="box">百度</a><ul id="box1"><li>吃饭</li><li id="cur">睡觉</li><li>打豆豆</li></ul><ol id="box2"><li>unity3D</li><li>cos2D</li><li>PHP</li></ol>
</body>
</html>

class选择器

概述：我们已经学习过了标签选择器、ID选择器、除此以外还可以使用class(类)选择器；

注意：ID选择器属性值一般唯一的、class属性值可以重复（不是唯一的）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><style type="text/css">.current{font-size:30px;background-color:cyan;}.cur{color:skyblue;font-size:18px;}</style>
</head>
<body><div class="current">我是祖国的老花骨朵,是祖国未来</div><div>我也是祖国花鼓富哦</div><div>我也是祖国花鼓富哦</div><div class="current">我也是祖国花鼓富哦</div><div>我也是祖国花鼓富哦</div><div>我也是祖国花鼓富哦</div><div>我也是祖国花鼓富哦</div><div>今天是北京<span class="cur">2019年11月30日21:47:25</span></div>
</body>
</html>

背景系列样式

概述：背景系列属性有如下几个：

Background-color[背景颜色]

background-image[背景图设置]

background-repeat：【背景图重复】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><style type="text/css">div{/*宽度和高度设置*/width:720px;height: 720px;/* 背景颜色 */background-color:red;/* 设置背景图 */background-image:url(jie.jpg);/* 背景重复设置 */background-repeat:no-repeat;/* 简写方式 */background: no-repeat url(jie.jpg)  red;}</style>
</head>
<body><div></div>
</body>
</html>

他们三者可以进行简写：

background:cyan url(1.jpg) no-repeat;

这三个属性值谁先谁后都可以

外部样式

概述：在前端web开发中样式可以防止在CSS文件里面，在页面中通过link标签可以引入外部文件样式。

比如：我们在程序当中创建CSS文件夹这个文件夹里面有一个default.css文件，这个文件里面可以书写你的样式。

静态页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><!-- 引入外部样式文件（CSS文件） --><link rel="stylesheet" type="text/css" href="css/default.css">
</head>
<body><div class="box"><p id="cur">北京昨天下大雪了,真的很美</p></div>
</body>
</html>

如果想引入外部CSS文件，需要通过link标签进行引入

default.css文件

.box{width:280px;height: 280px;background:red;
}
#cur{font-size: 20px;color:green;text-align:center;
}

行内样式

概述：我们在给标签设置样式时候：可以选择器外部样式、内部样式、行内样式（对于web开发很少用）；

行内样式：直接在开始标签的地方就可以设置，通过style属性进行设置。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title>
</head>
<body><p style="width:600px;height:300px;font-size: 30;color: red;">最近比较热门话题是xx公司暴力裁员</p>
</body>
</html>

注意:行内样式写法

<标签名字 style = “属性:属性值;属性:属性值;”>文本</标签名字>

注意：前端开发中样式有优先级的：行内样式=>内部样式=>外部样式

问题：三种样式那种好?

外部样式相对而言在开发项目时候经常用外部样式【可以进行统一管理：让你的项目中样式看的更加整洁】

盒模型

概述：所谓盒模型其实任意标签都有，可以让标签向外拓展。【padding、border、margin】

盒模型中：padding【内边距】、border【外边框】可以让元素向外拓展。

注意：前端所谓盒模型：是元素哪些数据呀？

盒模型:（margin + padding + border + width + heigh）【margin：设置标签与标签之间的距离】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><style type="text/css">.box{width:200px;height:200px;/* 外边框：可以让元素向外拓展 */border:5px solid red;padding:100px;}.box1{margin:10px;width:200px;height: 200px;background:red;}</style>
</head>
<body><div class="box">文字文字</div><div class="box1"></div>
</body>
</html>

浮动

概述：我们可以利用定位打破文档流，除此以外也可以利用浮动，其实浮动就是让元素进行‘靠左、靠右进行水平排列；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><style type="text/css">/* 清除默认样式 */*{margin:0;padding: 0;}div{/* 靠左侧浮动 */float:left;width:150px;height: 50px;background:cyan;}</style>
</head>
<body><div>最近北京气温降低</div><div>最近北京气温降低</div><div>最近北京气温降低</div><div>最近北京气温降低</div><div>最近北京气温降低</div><div>最近北京气温降低</div><div>最近北京气温降低</div><div>最近北京气温降低</div><div>最近北京气温降低</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}.box{position: relative;/*百分比:按照父元素的百分比缩放*/width: 100%;height: 50px;background: #aee5fe!important;}ul{position: absolute;left: 20%;width: 80%;height: 50px;/*将列表的默认样式清除*/list-style: none;}li{float: left;width: 60px;height: 50px;color: white;/*行高*/line-height: 50px;cursor: pointer;/*小手*//*文字居中*/text-align: center;}li:hover{background:red;}</style>
</head>
<body><div class="box"><ul><li>首页</li><li>国内</li><li>国际</li><li>军事</li><li>财经</li><li>娱乐</li><li>体育</li><li>互联网</li><li>科技</li><li>游戏</li><li>女人</li><li>汽车</li><li>房产</li></ul></div>
</body>
</html>

子元素宽度可以是百分比单位，按照父元素宽度进行划分百分比的；

Line-heigh(行高):可以让文本在垂直方向居中**（最好它的属性值和当前元素高度一边高就行了）**

轮播图小圆球

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}ul{position: relative;width: 300px;height: 50px;list-style: none;border: 1px solid black;left: 500px;}li{float: left;/*左侧外边距*/margin-right: 10px;width: 50px;height: 50px;background: green;/*圆角的设置*/border-radius: 25px 25px 25px 25px;/*如果四个值都一样可以直接写一个50px*/}.cur{background: yellow;}</style>
</head>
<body><div class="box"><ul><li class="cur"></li><li></li><li></li><li></li><li></li></ul></div>
</body>
</html>

四叶草效果

概述：web前端开发浏览器厂商常见：谷歌、IE、火狐、欧朋

animation：动画稍微了解（知道有这个东西即可）前端工程师可以利用样式搞动画

浏览器厂商私有前缀（带有私有前缀样式只能在当前浏览器中使用）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><style type="text/css">*{margin:0;padding: 0;}.box{/*相对定位：相对的是自己起始位置  */position: relative;width:200px;height: 200px;left:40%;/* 调用动画 */animation:donghua 5s linear 0s infinite;}.ye1{/* 绝对定位：参照定位父元素进行偏移*/position: absolute;width:100px;height: 100px;background:green;left:0px;top:0px;/* 圆角设置:分别左上、右上、右下、左下 */border-radius:0px 90px 0px 90px;}.ye2{/* 绝对定位：参照定位父元素进行偏移*/position: absolute;width:100px;height: 100px;background:green;left:100px;border-radius:90px 0px 90px 0px;}.ye3{position: absolute;width:100px;height: 100px;background:green;left:0px;top:100px;border-radius:90px 0px 90px 0px;}.ye4{position: absolute;width:100px;height:100px;background:green;left:100px;top:100px;border-radius:0px 90px 0px 90px;}/* 声明一个animation动画 */@-webkit-keyframes donghua{from{/* 旋转属性：可以让元素进行旋转（旋转单位是deg）*/transform:rotate(0deg);}to{transform:rotate(360deg);}}</style>
</head>
<body><div class="box"><div class="ye1"></div><div class="ye2"></div><div class="ye3"></div><div class="ye4"></div></div>
</body>
</html>

轮播图布局

概述：很多电商（淘宝、京东）网站它首页中都带有banner(轮播图功能)。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><style type="text/css">/* 默认样式清除 */*{margin:0;padding: 0;}.box{/*相对定位  */position: relative;//相对自己起始位置进行便宜，起始位置占用（别人不能用）width:520px;height: 280px;border:1px solid red;//外边框【外边框大小设置 实线 颜色设置】left:400px;  //定位元素才有left、top、right bottomtop:100px;/* 如果子元素超出父元素部分隐藏*/overflow: hidden;  //子元素超出父元素部分：隐藏掉}ul{position: absolute;list-style: none;//去除列表默认样式（前面黑色小球）width:520px;height: 280px;}.leftbtn{position:absolute;//绝对定位：按照已经定位父元素进行便宜width:60px;height:30px;background:black;left:0px;top:120px;color:white;text-align:center;//文本居中line-height:30px;//行高设置（让蚊子垂直方向居中：一般和高度一样）cursor:pointer;//小手opacity: .8;//透明【0~1】}.rightbtn{position: absolute;width:60px;height: 30px;background:black;right:0px;top:120px;color:white;text-align:center;line-height:30px;cursor:pointer;opacity: .8;}ol{position: absolute;width:200px;height:25px;list-style: none;left:35%;bottom:5px;}/* 后代选择器 */ol li{float:left;//左侧浮动width:25px;height: 25px;background:black;color:white;/* 变为圆球 */border-radius:12.5px;/*圆角设置【左上、右上、右下、左下】*/text-align:center;line-height:25px;margin-right:5px;}.cur{background:skyblue;/* 进行缩放 */transform:scale(1.2);}</style>
</head>
<body><div class="box"><!--有序列表去做显示图片  --><ul><li><img src="1.jpg" alt="" /></li><li><img src="1.jpg" alt="" /></li><li><img src="1.jpg" alt="" /></li><li><img src="1.jpg" alt="" /></li><li><img src="1.jpg" alt="" /></li></ul><!-- 做左右按钮 --><div class="leftbtn">left</div><div class="rightbtn">right</div><!-- 分页器 --><ol><li class="cur">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ol></div>
</body>
</html>

注意：transform可以让元素实现变化：旋转、平移、缩放

旋转（单位是度数deg）:可以让元素按照图形几何中心进行旋转transform:rotate(30deg)

缩放：可以等比例让元素宽度和高度成比例放大、缩小

tranform:scale():属性值【0-1】缩小大于1代表的是放大

【java学习之路】（javaWeb篇）002.CSS相关推荐

JAVA学习之路--基础篇三
目录关于Java中从键盘输入的语句 nextxxx().next().nextLine()的区别语句 if和if else语句 Switch语句 for语句 while和do..while bre ...
Java学习之路---对象篇（Object）
什么是对象? Java是一种面向对象的语言,那么什么是对象呢?我们将问题空间中的元素及其在解空间中的表示称之为"对象". "万物皆对象":将对象视为一个变量,可 ...
个人开发经历--我的java学习之路（学校篇）
个人开发经历--我的java学习之路(学校篇) 个人介绍: 姓名: 不在这里说明联系信息: 个人历程 jdbc阶段 sql生成器一代代码生成器 servlet阶段 servlet项目中,sql生成 ...
java学习之路目录（已完结）
java学习之路目录(持续更新中-) 第一阶段 javaSE(完结) 序号标题内容 001 java初识 java语言特点.体系结构.运行机制 002 java SE基础语法注释.关键字.变量. ...
我的Java学习之路2009-11-17
-------------------------------2009年3月19日开始----------------------------- 下载JDK Myeclipse Netbeans JB ...
Java学习之路02_选择方向_旺旺老师
提示:请您先阅读第一部分:Java学习之路01_软件江湖_旺旺老师第二部分:帮派之争就好像玩游戏要先选择角色种族,进入江湖要先选择帮派,那搞软件开发也要选择方向.个人总结的软件开发的方向:嵌入式开 ...
大数据学习之路 JUC篇
大数据学习之路 JUC篇(1) 前提说明本人是一名学生,茫茫it行业的一名卑微的小白,这是我第一次写博客.其原因是学着学着知识发现回顾的时候差不多全忘记了!!为了总结.复习自己以往学到过的有关大数据 ...
Java学习之路-预科
Java学习之路-预科第一章学习计算机的基本知识文章目录 Java学习之路-预科前言一.什么是计算机? 二.硬件及冯诺依曼结构 1.计算机硬件 1.1 计算机硬件组成 1.2 什么是装机 1 ...
java学习之路2--简单工厂模式实现饮料自动贩卖机
java学习之路2 用简单工厂模式实现饮料自动贩卖机功能简介具体实现 1.简单工厂模式 2.代码总结用简单工厂模式实现饮料自动贩卖机) 功能简介接收用户输入的信息,选择购买的饮料. 可供选择 ...
Java学习之路——接口
Java学习之路--接口概述总所周知,我们是父母的孩子.我们的身上既继承了爸爸的基因也继承了妈妈的基因.这就是多继承. 然而在 Java 程序中,是不支持多继承的.Java 仅仅支持单继承.但是接 ...

【java学习之路】（javaWeb篇）002.CSS