JavaWeb_02_CSS学习
CSS简介
Cascading Style Sheets (CSS)层叠样式表:en.wikipedia.org
- 层叠:一层一层的叠加样式
- 样式表:提供更多属性和属性值实现更多样式变化
- css将显示样式和网页内容分离
CSS和HTML的结合方式(四种结合方式)
(1)在每个html标签上面都有一个属性style,把css和html结合在一起
<div style="background-color:red; color:green;">
(2)使用html的一个标签实现<style>标签,写在head里面
<style type="text/css">
css代码;
</style>
<style type="text/css">
div {
background-color: blue;
color: red;
}
</style>
(3)在style标签里面使用语句(在某些浏览器下不起作用)
@import url(css文件的路径);
- 第一步,创建一个css文件
<style type="text/css">
@import url(div.css);
</style>
(4)使用头标签link,引入外部css文件
- 第一步,创建一个css文件
<link rel="stylesheet" type="text/css" href="css文件的路径" />
CSS的基本选择器
- 标签选择器 ;使用标签名作为选择器的名称
- class选择器
每个html标签都有一个class属性
// css内
.xxx {
background-color:red;
color:green;
}
// html内
<div class="xxx">aaa</div>
- id选择器 #名称
CSS基本选择器的优先级
标签内的style属性 > id选择器 > class选择器 > 标签选择器
扩展选择器(了解)
- 关联选择器
- 设置嵌套标签的样式 div p {}
- 组合选择器
- 不同的标签具有相同的样式 div,p {}
- 伪元素选择器
- 超链接的状态
- 原始:link
- 悬停:hover
- 点击:active
- 点击之后:visited
- 超链接的状态
css的盒子模型
在进行布局前需要报数据封装到一块一块的区域内(div)
- 边框
eg:border: 2px solid red; //(粗细|样式|颜色)
border:统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right
- 内边距
padding:20px; 使用padding统一设置
也可以分别设置
上下左右四个内边距 - 外边距
margin:20px;
可以使用margin统一设置
也可以分别设置
上下左右四个外边距
CSS的布局的漂浮(了解)
float:
* 属性值
left:文本流向对象的右边
right:文本流向对象的左边
CSS布局的定位(了解)
position:
* 属性值
* absolute:
-> 将对象从文档流中拖出
-> 可以是top、bottom等属性进行定位
* relative:
-> 不会把对象从文档流中拖出
-> 可以使用top、bottom等属性进行定位
JavaWeb_02_CSS学习的更多相关文章
- 从直播编程到直播教育:LiveEdu.tv开启多元化的在线学习直播时代
2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...
- Angular2学习笔记(1)
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
- ABP入门系列(1)——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- 消息队列——RabbitMQ学习笔记
消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Unity3d学习 制作地形
这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...
- 《Django By Example》第四章 中文 翻译 (个人学习,渣翻)
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...
- 菜鸟Python学习笔记第一天:关于一些函数库的使用
2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...
- 多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类)
前言:刚学习了一段机器学习,最近需要重构一个java项目,又赶过来看java.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...
随机推荐
- SpringMVC之七:SpringMVC中使用Interceptor拦截器
SpringMVC 中的Interceptor 拦截器也是相当重要和相当有用的,它的主要作用是拦截用户的请求并进行相应的处理.比如通过它来进行权限验证,或者是来判断用户是否登陆,或者是像12306 那 ...
- CentOS虚拟机通过主机网络上网
0 环境简介 环境如下: (1)宿主机为WIN7系统,连接内网,同时通过网关服务器上外网: (2)虚拟机为VMWare12下的CentOS7系统. 宿主机通过WIFI方式上外网的配置方法,参考本人另一 ...
- 【opencv学习笔记三】opencv3.4.0数据类型解释
opencv提供了多种基本数据类型,我们这里分析集中常见的类型.opencv的数据类型定义可以在D:\Program Files\opencv340\opencv\build\include\open ...
- 如何用python最快的获取大文件的最后几行
工作中经常会遇到处理日志文件的问题:为了得到日志的最新状态,我们需要获取日志文件的最后部分行来做判断.那么,这种情况下我们应该怎么做呢? 1)常规方法:从前往后依次读取 步骤:open打开日志文件. ...
- 【244】◀▶IEW-Unit09
Unit 9 Food 1)Model1题目及范文讲解 In the world today, there is a problem with food production. As a result ...
- AngularJs(Part 3)--注册服务
有以下5中方法注册一个AngularJS可以识别的Service value和constant是两个极其简单的方法,只有少数情况下会使用. service已经开始复杂了起来.而factory是我认为既 ...
- css属性学习
CSS display 属性 display 属性规定元素应该生成的框的类型. none:此元素不会被显示. block:此元素将显示为块级元素,此元素前后会带有换行符. inline默认.此元素会被 ...
- VIM显示utf-8乱码
找到vim的根目录下的vimrc文件打开,加入下面三行,保存.重开vim即可. set encoding=utf-8 set langmenu=zh_CN.UTF-8 language message ...
- celery和supervisor配合使用,实现supervisor管理celery进程
在这里我选择redis作为celery异步任务的中间人,系统选择CentOS6.5 64位.redis.celery和supervisor的安装参见官方文档. 安装完毕后: 1, 创建celery的实 ...
- Javascript中的"\r\n"
我们知道 \r 代表的是 回车符(ACSII: 13 或0x0d), 也就是"硬回车" \n 代表的是 换行符(ACSII: 10 或 0x0a), 也就是 "软回车&q ...