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. UDK游戏打包详解

    转自:http://blog.sina.com.cn/s/blog_944177030100ycki.html 安装完的udk目录下有4个主要的文件夹 Binaries -这个文件夹包含游戏的exe程 ...

  2. jQuery中attr()与prop()区别介绍

    .attr() : 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性. •.attr( attributeName ) •.attr( attributeName ) ...

  3. Scala Beginner

    开始学习Scala,下面的内容大部分从Scala官网翻译过来,有几个地方翻译的不是很好,表述不清楚的地方大家可以浏览Scala官网,多指教. Scala offical website is http ...

  4. jQuery命名空间和自定义插件的的多种方法

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jquery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  5. string实现

    #include<iostream> using namespace std;   class String{     friend ostream& operator<&l ...

  6. 2019计蒜之道初赛4 B. 腾讯益智小游戏—矩形面积交(简单)(矩形交集)

    B. 腾讯益智小游戏—矩形面积交(简单) 1000ms 262144K   腾讯游戏开发了一款全新的编程类益智小游戏,最新推出的一个小游戏题目是关于矩形面积交的.聪明的你能解出来吗?看下面的题目接招吧 ...

  7. mysql给id生成uuid

    mysql中id一般都设为uuid,除了我们在后台用到的uuid利用jpa注解来生成外,其实在mysql中直接也可以生成 直接上代码: 1.mysql中直接使用uuid()函数,可以生成一个随机的uu ...

  8. 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 ...

  9. RVO算法

    http://blog.sina.com.cn/s/blog_6ad33d350102xqal.html 简介 在介绍VO,RVO之前,需要先介绍路径规划. 对Agent进行路径规划,实际上要完成的任 ...

  10. solidity 学习笔记 2 (二维数组)

    solidity 二维数组: pragma solidity ^0.4.23; contract twoArray{ uint[2][3] grade =[[20,30],[40,50],[45,60 ...