CSS(更新完)
CSS
魏宇轩
时光会把你雕刻成你应有的样子。
展开
-
JavaWeb_CSS(1)_简介和 MyEclipse 的下载安装
什么是 CSS ?CSS (Cascading Style Sheets)是层叠样式表用来定义网页的显示效果。可以解决 html 代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能。简单一句话:CSS 将网页内容和显示样式进行分离,提高了显示功能。单纯使用 html 的属性来控制页面样式不方便,如下示例代码:<p align="center">...原创 2019-09-18 22:36:24 · 494 阅读 · 0 评论 -
JavaWeb_CSS(13)_定位_相对定位
定位相对定位相对定位是一个非常容易理解的概念,如果对一个元素先对定位,可以设置其水平位置和垂直位置,这个元素相对于元素的 起点 *(没有定位的左上角原始位置)开始移动。注意:在使用相对定位的时候无论是否进行移动,元素仍然会占据原有的空间,因此移动元素可能覆盖其他元素。示例代码<!DOCTYPE html><html> <head> &l...原创 2019-03-12 21:26:12 · 476 阅读 · 1 评论 -
JavaWeb_CSS(14)_文字处理_字体和字号
文字处理字体示例代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>www.weiyuxuan.com</title> <style type="text/css&quo原创 2019-09-18 22:30:15 · 2774 阅读 · 0 评论 -
JavaWeb_CSS(15)_文字处理_加粗、斜体、下划线
文字处理加粗、斜体、下划线示例代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;www.weiyuxuan.com&l原创 2019-03-12 22:22:15 · 4054 阅读 · 0 评论 -
JavaWeb_CSS(16)_文字处理_对齐方式、首字放大
文字处理文字对齐方式示例代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>www.weiyuxuan.com</title> <style type="text/c原创 2019-03-12 22:39:36 · 1553 阅读 · 0 评论 -
JavaWeb_CSS(17)_背景设置
背景设置背景颜色和图片示例代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>www.weiyuxuan.com</title> </head> <style原创 2019-03-12 23:16:10 · 8680 阅读 · 1 评论 -
JavaWeb_CSS(18)_表格样式
表格样式示例代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>www.weiyuxuan.com</title> </head> <style ty原创 2019-03-13 07:22:08 · 2293 阅读 · 0 评论 -
JavaWeb_CSS(19)_列表样式
列表样式示例代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>www.weiyuxuan.com</title> </head> <style typ原创 2019-03-13 07:39:21 · 516 阅读 · 0 评论 -
JavaWeb_CSS(20)_列表菜单制作
列表菜单制作示例代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;www.weiyuxuan.com&lt;/title&原创 2019-03-13 07:54:48 · 1295 阅读 · 0 评论 -
JavaWeb_CSS(12)_定位_绝对定位
定位绝对定位设置绝对定位的元素从文档流中完全删除,以浏览器的左上角为相对位置,设置水平位置和垂直的位置。position: absolute;设置绝对定位, 当前的div脱离文档流,宽度变为 0。left: 20px;距离浏览器的左边框 20px。top: 80px;距离浏览器的上边框 20px,right:距离右边框,bottom:距离下边框 。示例代码&...原创 2019-03-12 21:06:59 · 682 阅读 · 0 评论 -
JavaWeb_CSS(11)_div 和 span_浮动
div 浮动HTML 页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行。浮动层:给元素的 float 属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素。Float 有 4 个值left...原创 2019-03-12 20:10:56 · 714 阅读 · 0 评论 -
JavaWeb_CSS(10)_div 和 span_边框
div 的边框样式示例代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt; www.weiyuxuan.com &lt;/t原创 2019-03-11 21:16:34 · 1311 阅读 · 0 评论 -
JavaWeb_CSS(2)_样式在元素属性中引入
css 的引入方式在HTML元素属性中引入在 html 标签中使用 style 属性属性值是键值对形式的集合,每一个键值对之间的用 : 连接,多个属性值之间用 ; 隔开。可以通过Alt+/来提示 html 的属性和 css 样式的属性和样式值。text-align:元素内的水平布局。color:内容的颜色。示例代码:&amp;lt;p style=&quot;text-align: cent...原创 2019-03-10 23:11:50 · 517 阅读 · 0 评论 -
JavaWeb_CSS(3)_样式在 head 引入
css 的引入方式在 HTML 的头信息中定义 CSS在 HTML 的头信息中定义 CSS定义本页所有 p 标签的样式示例代码:&lt;style type="text/css"&gt; p { /*CSS注释*/ text-align: center; color: blue; }&lt;/style&gt;结果图:原创 2019-03-11 06:54:24 · 591 阅读 · 0 评论 -
JavaWeb_CSS(4)_在 HTML 中引入 CSS 文件
css 的引入方式在 HTML 中进入 CSS 文件通过 head 标签中 link 标签来实现,前提也是先要有一个已定好的 CSS 文件。新建 css 文件第一种引入方式示例代码CSS 文件:p{ text-align: center; color: red; }HTML 文件:&lt;body&gt; &lt;p&gt; 你好 &lt;/原创 2019-03-11 07:26:40 · 4276 阅读 · 0 评论 -
JavaWeb_CSS(5)_样式优先级
样式优先级由上到下,由外到内。优先级由低到高。示例代码CSS 文件1p{ text-align: center; color: red; }CSS 文件2p{ text-align: center; color: green; }/*div 表示 p 标签往内一层*/div p{ text-align: center; color: red; }...原创 2019-03-11 07:54:53 · 572 阅读 · 0 评论 -
JavaWeb_CSS(6)_选择器_基本选择器
CSS的选择器CSS的基本选择器:html 选择器(元素类型选择器),就是把 html 本身作为选择器。class 选择器,就是把 html 标签的 class 属性值作为选择器。为了和 HTML 进行区分,加 . 作为前缀。id 选择器,就是把 html 标签的 id 属性值作为选择器。为了和 HTML 进行区分,加 # 作为前缀。示例代码CSS 文件@CHARSET "UTF...原创 2019-03-11 08:18:35 · 576 阅读 · 0 评论 -
JavaWeb_CSS(7)_选择器_选择器扩展
CSS的选择器选择器扩展关联选择器标签的嵌套使用。相同标签中某些内容有不同显示。需求:写一句话,我爱学习,把学习用粗体表示。针对一段话中的粗体部分添加样式:绿色,30px。示例代码CSS 文件@CHARSET "UTF-8";p{ text-align: center; }p b{ font-size: 30px; color:green;}p b:元素中...原创 2019-03-11 09:06:09 · 392 阅读 · 0 评论 -
JavaWeb_CSS(8)_div 和 span_div 概述
强大的 div 概述div 和 span 是 html 中块级元素,是层叠样式表中的定位技术。div 第一个例子示例代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> www.weiyuxuan.com <原创 2019-03-11 20:05:52 · 483 阅读 · 0 评论 -
JavaWeb_CSS(9)_div 和 span_区别
Div 和 span 的区别div 自动的换行,span不换行。示例代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt; www原创 2019-03-11 20:36:23 · 861 阅读 · 0 评论 -
JavaWeb_CSS 汇总
汇总原创 2019-09-18 22:53:14 · 968 阅读 · 1 评论