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.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...
随机推荐
- UDK游戏打包详解
转自:http://blog.sina.com.cn/s/blog_944177030100ycki.html 安装完的udk目录下有4个主要的文件夹 Binaries -这个文件夹包含游戏的exe程 ...
- jQuery中attr()与prop()区别介绍
.attr() : 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性. •.attr( attributeName ) •.attr( attributeName ) ...
- Scala Beginner
开始学习Scala,下面的内容大部分从Scala官网翻译过来,有几个地方翻译的不是很好,表述不清楚的地方大家可以浏览Scala官网,多指教. Scala offical website is http ...
- jQuery命名空间和自定义插件的的多种方法
jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jquery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...
- string实现
#include<iostream> using namespace std; class String{ friend ostream& operator<&l ...
- 2019计蒜之道初赛4 B. 腾讯益智小游戏—矩形面积交(简单)(矩形交集)
B. 腾讯益智小游戏—矩形面积交(简单) 1000ms 262144K 腾讯游戏开发了一款全新的编程类益智小游戏,最新推出的一个小游戏题目是关于矩形面积交的.聪明的你能解出来吗?看下面的题目接招吧 ...
- mysql给id生成uuid
mysql中id一般都设为uuid,除了我们在后台用到的uuid利用jpa注解来生成外,其实在mysql中直接也可以生成 直接上代码: 1.mysql中直接使用uuid()函数,可以生成一个随机的uu ...
- Fenwick Tree / Binary Indexed Tree
Motivation: Given a 1D array of n elements. [2, 5, -1, 3, 6] range sum query: what's the sum from 2n ...
- RVO算法
http://blog.sina.com.cn/s/blog_6ad33d350102xqal.html 简介 在介绍VO,RVO之前,需要先介绍路径规划. 对Agent进行路径规划,实际上要完成的任 ...
- solidity 学习笔记 2 (二维数组)
solidity 二维数组: pragma solidity ^0.4.23; contract twoArray{ uint[2][3] grade =[[20,30],[40,50],[45,60 ...