java-web前端 CSS

CSS介绍

CSS 指的是层叠样式表* (Cascading Style Sheets), 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素,节省了大量工作，并且可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中
CSS：也称级联样式表。

CSS语法

选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。

示例：
在此例中，所有

元素都将居中对齐，并带有红色文本颜色：

p {color: red;text-align: center;
}

idea中建立css样式

优先级

html与css优先规则：内联样式 > 外联样式
CSS 优先规则：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

优先级使用

css外联样式：

<link href="css/myCSS.css" rel="stylesheet"/>

html5内联样式：

<!--内联样式-->
<style>div{border: 4px solid red;width: 300px;height: 300px;background: blue;}
</style>

优先级代码示例

html5

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!--css样式-->
<!--rel="stylesheet"不能省略-->
<link href="css/myCSS.css" rel="stylesheet"/>
<!--内联样式-->
<style>div{border: 4px solid red;width: 300px;height: 300px;background: blue;}
</style>
<body>
<div class="d1">DIV1</div>
<div class="d2">DIV2</div>
</body>
</html>

css


.d1{border: 1px solid red;width: 200px;height: 200px;background: blue;
}
.d2{border: 10px solid darkslategrey;width: 200px;height: 200px;background: yellow;
}

CSS常见属性

内边距：padding组件中元素到组件的边距，元素到盒子的距离
外边距：margin 盒子外面周边的距离
一个盒子占用大小：盒子大小+外边距大小

java-web前端 CSS相关推荐

Java Web 前端高性能优化（二）
2019独角兽企业重金招聘Python工程师标准>>> ######一.上文回顾上回我们主要从图片的合并.压缩等方面介绍前端性能优化问题(详见Java Web 前端高性能优化(一) ...
Java Web 前端高性能优化（二） 1
一.上文回顾上回我们主要从图片的合并.压缩等方面介绍前端性能优化问题(详见Java Web 前端高性能优化(一)) 本次我们主要从图像BASE64 编码.GZIP压缩.懒加载与预加载以及 OneAP ...
好程序员web前端CSS选择符（选择器）:表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
Web前端css知识点概括
Web前端css知识点的简单概括如下,方便记忆. 1.字体,背景(font-style,font-weight,font-size/line-height,font-family...backgrou ...
WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器直接选择器组合选择器分组选择器也叫并集选择器属性选择器伪类选择器伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
web前端css伪元素使用阿里iconfont中Unicode编码
web前端css伪元素使用阿里iconfont中Unicode编码在阿里iconfont中创建项目新建项目搜索自己想要的图标并添加入库点击购物车添加至项目回到"我的项目" ...
Java Web 前端高性能优化（一）
Web 发展的速度让许多人叹为观止,层出不穷的组件.技术,只需要合理的组合.恰当的设置,就可以让 Web 程序性能不断飞跃.所有 Web 的思想都是通用的,它们也可以运用到 Java Web.这一系列 ...
python java web前端 net 移动开发_JavaScript超越了Java，c，python等等成为Stack Overflow上最热门的...
Javascript 可以做什么 1. Web 前端相信这个这个是毫无疑问的,在 Web 前端的地位目前是没有任何语言能撼动它的霸主地位. image.png 2. 后端 Nodejs Node.j ...
（6K-10K外派到盛大）.NET/PHP/Java/Web前端/Linux C++开发
帮公司招人, 职位全部都在[上海]!如果有兴趣的请联系我: email/msn: wbqsln@126.com qq: 155217529 ============================== ...
给你一份详细的web前端CSS布局指南，请查收
我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而其中,关于页面布局的部分,又是书写样式代码时候的重点和难点,这篇文章就尽可 ...