CSS简介

Cascading Style Sheets (CSS)层叠样式表:en.wikipedia.org

  • 层叠:一层一层的叠加样式
  • 样式表:提供更多属性和属性值实现更多样式变化
  • css将显示样式和网页内容分离

CSS和HTML的结合方式(四种结合方式)

(1)在每个html标签上面都有一个属性style,把csshtml结合在一起

<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学习的更多相关文章

  1. 从直播编程到直播教育:LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  2. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  3. ABP入门系列(1)——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  4. 消息队列——RabbitMQ学习笔记

    消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...

  5. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. Unity3d学习 制作地形

    这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...

  7. 《Django By Example》第四章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...

  8. 菜鸟Python学习笔记第一天:关于一些函数库的使用

    2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...

  9. 多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类)

    前言:刚学习了一段机器学习,最近需要重构一个java项目,又赶过来看java.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...

随机推荐

  1. SpringMVC之七:SpringMVC中使用Interceptor拦截器

    SpringMVC 中的Interceptor 拦截器也是相当重要和相当有用的,它的主要作用是拦截用户的请求并进行相应的处理.比如通过它来进行权限验证,或者是来判断用户是否登陆,或者是像12306 那 ...

  2. CentOS虚拟机通过主机网络上网

    0 环境简介 环境如下: (1)宿主机为WIN7系统,连接内网,同时通过网关服务器上外网: (2)虚拟机为VMWare12下的CentOS7系统. 宿主机通过WIFI方式上外网的配置方法,参考本人另一 ...

  3. 【opencv学习笔记三】opencv3.4.0数据类型解释

    opencv提供了多种基本数据类型,我们这里分析集中常见的类型.opencv的数据类型定义可以在D:\Program Files\opencv340\opencv\build\include\open ...

  4. 如何用python最快的获取大文件的最后几行

    工作中经常会遇到处理日志文件的问题:为了得到日志的最新状态,我们需要获取日志文件的最后部分行来做判断.那么,这种情况下我们应该怎么做呢? 1)常规方法:从前往后依次读取 步骤:open打开日志文件. ...

  5. 【244】◀▶IEW-Unit09

    Unit 9 Food 1)Model1题目及范文讲解 In the world today, there is a problem with food production. As a result ...

  6. AngularJs(Part 3)--注册服务

    有以下5中方法注册一个AngularJS可以识别的Service value和constant是两个极其简单的方法,只有少数情况下会使用. service已经开始复杂了起来.而factory是我认为既 ...

  7. css属性学习

    CSS display 属性 display 属性规定元素应该生成的框的类型. none:此元素不会被显示. block:此元素将显示为块级元素,此元素前后会带有换行符. inline默认.此元素会被 ...

  8. VIM显示utf-8乱码

    找到vim的根目录下的vimrc文件打开,加入下面三行,保存.重开vim即可. set encoding=utf-8 set langmenu=zh_CN.UTF-8 language message ...

  9. celery和supervisor配合使用,实现supervisor管理celery进程

    在这里我选择redis作为celery异步任务的中间人,系统选择CentOS6.5 64位.redis.celery和supervisor的安装参见官方文档. 安装完毕后: 1, 创建celery的实 ...

  10. Javascript中的"\r\n"

    我们知道 \r 代表的是 回车符(ACSII: 13 或0x0d), 也就是"硬回车" \n 代表的是 换行符(ACSII: 10 或 0x0a), 也就是 "软回车&q ...