CSS:层叠样式表：

作用:,美化页面.

内联样式：在标签的style属性中添加样式代码, 弊端:不能复用
<h1 style="color: red;background-color: green">内联样式1</h1>
内部样式：在head标签里面添加style标签, 通过选择器找到元素后再添加样式代码, 可以复用但是不能多页面复用
<style>/*css注释*//*通过选择器找到元素然后再添加样式代码*//*标签名选择器*/h2{color: blue;background-color: yellow;}
</style>
外部样式：
在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以多页面复用,可以将样式代码和html代码分离开.

工作中外部样式使用的最多,
<link rel="stylesheet" href="My.css">  写css代码在MY.css中。

选择器：选择不同的标签加样式。

1、id选择器: 给元素加id="xxx";id不能全数字. head中新建style 中#id名

2、类选择器给元素加class="xxx" 也不能为全数字.

3、分组选择器: 将id class 行标签等用逗号分开.

4、属性选择器: input [type=" xxx"{color: 颜色}]

5、任意元素选择器*{设置各种}
<style>/*id选择器*/#p1{color: red;}/*类选择器*/.c1{color: green}/*分组选择器*/h2,#p1,.c1{background-color: yellow}/*属性选择器*/input[type='text']{background-color: blue}/*任意元素选择器*/*{/*边框: 粗细 实线边框 颜色*/border: 1px solid red;}</style>

分区标签:

将多个相关的标签放到一起.便于管理.

div:块级独占一行

span: 行级共占一行

***至少3个部分:头体脚.再有多个分区.

html5标准中新增了分区标签,作用与3div一样.为了提高代码可读性.

header头--footer脚--section区域--article文章/文字--nav导航

关于分区的选择器：

子孙后代选择器：

<!--子孙后代选择器, 从最大标签开始 选择最后一个div里面所有的p  包括最底层p5--><!--<style>body div div p{background-color: bisque;}</style>-->

子类选择器

<!--子元素选择器--><style>body>div>div>p{/*不选body时在两层div里面的都算.:p3  p4  p5 */background-color: blue;}</style>

伪类选择器：更改不同状态下的样式。 link 为访问状态...... 更多参考CSS 教程

<style>a:link{color: red}/*未访问状态*/a:visited{color: yellow}/*访问过*/a:hover{color: lightpink}/*悬停*/a:active{color: aliceblue}/*点击状态*/</style>

颜色赋值：

三原色：红绿蓝   RGB   取值范围 ：0-255五种赋值方法：——颜色单词red/blue/yellow——6位16进制：#ff0000——3位16进制：#fff——3位10进制：rgb（255,12,12）——4位10进制：rgba（212，,55,55,0-1）a：透明度  0到1

文字、文本样式：

文本和字体相关样式
text-align: left/right/center; 文本水平对齐方式
text-decoration: overline/underline/line-through/none 文本修饰
line-height:20px; 行高, 多行文本可以控制行间距, 单行文本可以实现垂直居中
font-size: 20px; 设置字体大小
font-weight:bold/normal; 设置加粗或去掉加粗
font-style:italic; 设置斜体
font-family:xxx,xxx,xxx; 设置字体
font: 20px xxx,xxx,xxx; 设置字体大小和字体
text-shadow: 颜色 x偏移值 y偏移值 浓度（值越大越模糊）

<style>div {width: 200px;height: 50px;border: 1px solid red;text-align: center; /*水平对齐方式*//*文本修饰overline/underline/line-through/none*/text-decoration: line-through;/*通过行高设置垂直居中*/line-height: 50px;/*字体大小*/font-size: 20px;font-weight: bold;/*加粗*/font-style: italic;/*斜体*/}a {text-decoration: none; /*去掉自带下划线*/}h1{font-weight: normal;/*去掉加粗效果*//*字体设置*//*font-family: cursive;*/font: 50px cursive,Onyx,fantasy;}</style>

元素显示方式：

block: 块级元素的默认值 , 特点: 独占一行,可以修改元素的宽高 , 包括: div,h1-h6,p
inline: 行内元素的默认值, 特点:共占一行, 不可以修改元素的宽高, 包括: span, b,i,s,u,超链接a
inline-block: 行内块元素的默认值, 特点:共占一行, 可以修改宽高, 包括:img,input
none:隐藏元素
行内元素不能修改宽高, 如必须修改则需要先把display改成block或inline-block
span {border: 1px solid blue;width: 100px;height: 100px;/*行内元素不能修改宽高, 如必须改则修改display为块级或行内块*/display: inline-block;}

—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

盒子模型：

把所有的网页元素都看成一个盒子，

它具有：（具体查看苍老师css文档）

content文本样式，

padding内边距（边框和文本），

border边框，

margin外边距（不同元素之间的距离）四个属性，这就是盒子模型。

浏览器右键检查——小箭头查看样式。

外边距：margin

~取其中一个设置的最大值。

~span行内上下外边距无效。

~外边距：左右元素添加左右边距，取相加值。

~元素的上边缘和上级元素的上边缘重合时添加上外边距会发送粘连。在上级元素添加 overflow：hidden；解决粘连问题。

~部分标签自带外边距：body p h1-h6 ...

内边距：padding

~添加内边距会改变外边距，所以增内减外。

~部分标签自带内边距

css三大特征

继承性：元素继承上一级元素的文字文本相关样式，部分标签自带效果不受影响。

层叠型：其他选择器也对同一元素操作，不同属性可以层叠添加。（不同选择器设置不同效果）

优先级：作用范围越小优先级越大。 id>class>标签名》>继承（选择器）

居中相关：

text-align:center; 让元素的文本内容居中, 让元素里面的行内元素自身和行内块元素自身居中
margin:0 auto; 让块级元素自身居中

元素定位：：
静态定位
相对定位
绝对定位
固定定位
浮动定位

静态定位
默认的定位方式, 也称为文档流定位
格式: position:static
特点: 元素以左上为基准,块级元素从上往下依次排列, 行内元素从左向右依次排列 ,无法实现层叠效果
如何控制元素的位置? 通过外边距
相对定位
格式: position:relative
特点: 可以实现层叠效果, 元素不脱离文档流(不管元素显示到什么位置仍然占着原来的位置)
如何控制元素的位置? 通过left/right/top/bottom让元素相对于初始位置做偏移
应用场景: 当需要移动某个元素而其它元素不受影响时使用(元素位置微调)
绝对定位
格式: position:absolute
特点: 可以实现层叠效果, 元素脱离文档流(不占原来的位置)
如何控制元素的位置? 通过left/right/top/bottom让元素相对于窗口或某一个上级元素做位置偏移,如果需要相对于某个上级元素,必须给上级元素设置为相对定位
应用场景: 当需要网页面中添加一个元素, 这个元素不影响其他元素的显示位置时使用绝对定位
固定定位
格式: position:fixed;
特点: 元素固定在窗口的某个位置, 元素脱离文档流
如何控制元素的位置? 通过left/right/top/bottom让元素相对于窗口做位置偏移
应用场景: 当需要将元素固定在窗口某个位置时使用
浮动定位
格式: float:left/right
特点: 元素脱离文档流, 从当前所在行向左或向右浮动,当撞到上级元素边缘或其他浮动元素时停止.
浮动元素一行装不下会自动换行, 换行时有可能被卡住
当元素的所有子元素全部浮动时,自动识别的高度为0,后面的元素会顶上来出现显示异常,给元素添加overflow:hidden解决
应用场景: 当需要将纵向排列的元素改成横向排列时使用

 <style>#d1{width: 50px;height: 200px;background-color: red;position: absolute;/*控制元素的显示层级, 值越大显示越靠前*/z-index: 1;}#d2{width: 200px;height: 50px;background-color: blue;position: absolute;z-index: 2;}#d3{width: 200px;height: 200px;/*设置超出的部分是否显示 hidden隐藏  scroll滚动显示*/overflow: scroll;}</style>
显示层级z-index
当元素修改定位方式时,会出现元素层叠的问题, 通过z-index可以控制层叠的元素谁显示在上面谁显示在下面
必须改了定位方式之后z-index样式才会生效
z-index值越大显示层级越靠前
溢出设置Overflow
visible(默认): 超出部分显示
hidden: 超出部分隐藏
scroll: 超出部分滚动显示

Java学习篇——JavaWeb：CSS相关推荐

Java学习篇——SpringBoot
1. 关于Spring Boot Spring Boot框架主要解决了创建工程后需要进行繁琐的配置的问题,是一个"开箱即用"的框架,其核心思想是"约定大于配置" ...
java学习之javaWeb
Web开发 1.CS和BS的异同点 2.Tomcat 2.1新建项目-部署-运行-访问(底层原理) 2.2在IDEA下新建javaWeb项目 3.Servlet 3.1Servlet获取参数 3.2S ...
Java学习篇十——关于方法的定义和使用
写在前面:本人是借助两本参考书自学的,其中部分例子和语句均是来自参考书.第一本:<Java 编程指南>,[美] Budi Kurniawan 著,闫斌贺莲译.第二本:<第一行代码 ...
Java学习篇五——分支（选择）结构之switch语句及其中的break作用
写在前面:本人是借助两本参考书自学的,其中部分例子和语句均是来自参考书.第一本:<Java 编程指南>,[美] Budi Kurniawan 著,闫斌贺莲译.第二本:<第一行代码 ...
Java学习day3——Javaweb登录页面设计（1）（含JSP代码）
写在前面本文主要的内容是完成网页登录页面设计,以及判断用户名密码是否正确,如果正确,进入下一页面,并输出sessionID,若错误,则在登录页面给出用户名或密码错误提示,并在登录页面显示访问次数. ...
2019-06-07 Java学习日记之CSS
表格布局的缺陷: 1.嵌套层级太多,一旦出现嵌套顺序错乱,整个页面达不到预期效果 2.采用表格布局,页面不够灵活,栋其中某一块,整个表格布局结构全都要变 HTML的块标签: div标签:默认占一行,自 ...
JAVA学习篇--JSP实现原理
JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. 起源: 在很多动态网页中,绝大部分内容都是固定不变的,只有局部内容需要 ...
JAVA学习篇--Servlet详解
Servlet由来做过BS项目的人都知道,浏览器能够根据HTML静态标记语言来显示各式各样的网页.但是如果我们需要在网页上完成一些业务逻辑:比如登陆验证.或者说网页显示的内容在服务器的数据库中.如果 ...
JAVA学习篇--Java类加载
由来: 与普通程序不同的是,Java程序(class文件)并非本地的可执行程序(解释性语言). 当执行Java程序时.首先执行JVM(Java虚拟机),然后再把Javaclass载入到JVM里头执行, ...

Java学习篇——JavaWeb：CSS

CSS:层叠样式表：

盒子模型：

css三大特征

Java学习篇——JavaWeb：CSS相关推荐

最新文章

热门文章