CSS入门讲解

HTML人+CSS衣服+JS动作=>DHTML

CSS: 层叠样式表 CSS2.0 和 CSS3.0 版本,目前学习CSS2, CSS3只是多了一些样式出来而已

CSS 干啥用的

一句话:CSS 能控制,你这个页面 长什么样子。 就比如 一个光着身子的人,给他什么衣服,什么发型,七七八八的。

  1. 你可以将内容和格式分离。
  2. 你可以以前所未有的能力控制页面布局。
  3. 你可以制作体积更小下载更快的网页。安全
  4. 你可以将许多网页同时更新,比以前快更容易。

5. 浏览器将成为你更友好的界面

Web 99.999% CSS

怎么用CSS?

  1. 直接在标签上用

  2. 直接在HTML文件,头部中写样式

  3. 样式单独写在一个文件里面,在HTML中引用

CSS分类:

一. 内部样式表(针对本页面有效)

  1. HTML选择器: 特点:选择器就是HTML元素! 好处:简单明了;不足:一棒子打死一船的人!

  2. class(类)选择器:

    特点: 声明: .XXXX{}

    使用: <元素 class=”XXXX”>.. 相穿的人,都可以穿!

  3. ID选择器:

    特点: 声明: #XXXX{}

    使用: <元素 id=”XXXX”>.. 一般使用一次!

二. 行内样式表(针对单独元素有效)

  1. <元素 style=”XXXX”>内容!

三. 外部样式表(针对所有页面有效)


情景选择器

A,B,C=>小伙伴穿同样衣服

情景选择器: X Y 只有在 X 下面的Y元素才起作用

  1. .test .demo {
  2. color:red;
  3. width:120px;
  4. height:120px;
  5. }
  1. <div class="test">
  2. <div class="demo">
  3. 有效果,在test下面
  4. <div class="demo">有效果</div>
  5. </div>
  6. </div>
  7. <div class="demo">没有效果,不在 test 下面</div>

例子中:test 下面的两个 demo ,都会起作用

如果使用 下面这种呢?

直接子集情景

//这个则是,x 的下一级是 y才起作用

只有 第一个 demo 起作用

CSS常用属性:

字体属性 :(font)

  • 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD
  • 样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
  • 行高 line-height: normal;(正常) 单位:PX、PD、EM
  • 粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
  • 变体 font-variant: small-caps;(小型大写字母) normal;(正常)
  • 大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
  • 修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
  • 常用字体: (font-family)
  • “Courier New”, Courier, monospace, “Times New Roman”, Times, serif, Arial, Helvetica, sans-serif, Verdana

背景属性 : (background)

  • 色彩background-color: #FFFFFF;
  • 图片background-image: url();
  • 重复background-repeat: no-repeat;
  • 滚动background-attachment: fixed;(固定) scroll;(滚动)
  • 位置background-position: left(水平) top(垂直);
  • 简写方法 background:#000 url(..) repeat fixed left top;

区块属性 : (Block)

  • 字间距letter-spacing: normal; 数值
  • 对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
  • 缩进text-indent: 数值px;
  • 垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
  • 词间距word-spacing: normal; 数值
  • 空格white-space: pre;(保留) nowrap;(不换行)
  • 显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)

方框属性 : (Box)

  • width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左

边框属性 : (Border)

  • border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
  • border-width:; 边框宽度
  • border-color:#;
  • 简写方法border:width style color;

列表属性 : (List-style)

  • 类型 list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;
  • 位置 list-style-position: outside;(外) inside;
  • 图像 list-style-image: url(..);

定位属性: (Position)

  • position: absolute; relative; static;
  • visibility: inherit; visible; hidden;
  • overflow: visible; hidden; scroll; auto;
  • clip: rect(12px,auto,12px,auto) (裁切)

#001 CSS快速入门讲解的更多相关文章

  1. #001 HTML快速入门讲解

    整理了下最早开始学习技术的笔记  3W1H学习法? (其他技术同理) What   HTML是什么? When  什么时候使用HTML? Why    为什么使用HTMl? HOW  怎么使用HTML ...

  2. CSS快速入门(四)

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  3. Html与CSS快速入门01-基础概念

    Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...

  4. Html与CSS快速入门02-HTML基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...

  5. Html与CSS快速入门03-CSS基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...

  6. Html与CSS快速入门04-进阶应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...

  7. HTML/CSS快速入门

    Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...

  8. CSS快速入门例子

    CSS入门应用 01-结合方式01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  9. CSS快速入门基础篇,让你快速上手(附带代码案例)

    1.什么是CSS 学习思路 CSS是什么 怎么去用CSS(快速上手) CSS选择器(难点也是重点) 网页美化(文字,阴影,超链接,列表,渐变等) 盒子模型 浮动 定位 网页动画(特效效果) 项目格式: ...

随机推荐

  1. 在百度搜索里展现网站LOGO

    我们经常在百度搜索一些网站可以看到一个网站在百度上展示的三个部分: 网站的名称 如(趣学车) 网站的描述 一段比较详细的对网站的介绍 网站的logo,一张logo图片 如下图 ------ 接下来我们 ...

  2. [日常] nginx访问频率限制

    去年的事,随便记记 ========================================================================= 2017年3月15日 记录: n ...

  3. IDEA 中edit configurations加号找不到tomcat server

    前言:在本机 idea 中搭建 springMVC 项目,正准备配置 Tomcat 时,发现没有 tomcat server 选项,而我的 idea 是有这个插件的,所以解决问题的方案应该是另一个地方 ...

  4. AutoFac简介

    在.NET上现在存在许多的依赖注入容器, 如:Castle Windsor.StructureMap.Autofac .Unity. 这里主要介绍一下Autofac,Autofac和其他容器的不同之处 ...

  5. problem-solving-with-algorithms-and-data-structure-usingpython(使用python解决算法和数据结构) -- 基本数据结构 -- 队列

    1. 什么是队列? 队列是项的有序结合,其中添加新项的一端称为队尾,移除项的一端称为队首. FIFO:先进先出 2. 队列抽象数据类型 队列操作如下: Queue() 创建一个空的新队列. 它不需要参 ...

  6. Spring 中面向AOP之一系列做法

    Spring的AOP实现是通过集成AspectJ框架实现的. 想必这句话大家都知道了吧,不知道也没关系,最起码你现在知道了. 四种实现方案,接下来我们一一去揭开它的神秘的面纱....... 第一种(伪 ...

  7. hexo的next主题个性化教程:打造炫酷网站

    看到有些next主题的网站很炫酷,那么是怎么配置的呢?接下来我会讲一讲如何实现一些炫酷的效果 主要有以下32种: 在右上角或者左上角实现fork me on github 添加RSS 添加动态背景 实 ...

  8. 0ctf2018 pwn

    前言 对 0ctf2018 的 pwn 做一个总结 正文 babystack 漏洞 非常直接的 栈溢出 ssize_t sub_804843B() { char buf; // [esp+0h] [e ...

  9. redis mysql验证 redis_mysql_check.py

    # coding:utf-8 import pymysql import redis import sys def con_mysql(sql): db = pymysql.connect(host= ...

  10. linux(centos7)下SVN服务器搭建手札

    linux(centos)下SVN服务器如何搭建?说到SVN服务器,想必大家都知道,可以是在LINUX下如何搭建SVN服务器呢?那么今天给大家分享一下linux(centos)搭建SVN服务器的思路! ...