摘要：web前端设计三剑客分为是html、CSS、Javascript，前面我们已经对html基础知识做了介绍，它定义了页面基本组成，而CSS则控制网页的样式和布局。

首先，明确一个问题，什么是CSS？

1.CSS指层叠样式表 (Cascading Style Sheets)

2.能定义如何显示HTML元素

3.解决内容与表现分离的问题

4.外部样式表极大提高工作效率

下面，开始正题

  • CSS语法

CSS规则由两个主要部分组成：选择器，以及一条或多条声明

选择器       声明1          声明2

h1              {color:blue;text-align:center;}

属性   值     属性         值

CSS声明总是以分号（;）结束，声明总以大括号（{}）括起来：

如h1 {color:blue;text-align:center;}

CSS注释以“/*”开始，以“*/”结束。

CSS Id和Class

以#表示选择器的id

以.表示选择器的class

以p.表示所有p标签class

  • CSS创建

样式表的插入：①外部样式表 ②内部样式表 ③内联样式表

外部样式表：适用于样式需要应用到很多页面

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

每个页面使用<link>标签链接到样式表，且位于文档的头部。

mystyle.css样式表不能包含任何的html标签，如

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("/images/back40.gif");}

内部样式表：当单个文档需要特殊的样式时，就应该使用内部样式表。

使用<style>标签在文档头部定义，如

<head>

<style>

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

</style>

</head>

内联样式：相关标签内使用

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

  • 背景

背景颜色：body {background-color:#b0c4de;}

背景图片：

body {background-image:url('paper.gif');}图片默认在水平和垂直方向平铺

body {background-image:url('paper.gif');background-repeat:repeat-x;}图片在水平方向平铺

body {background-image:url('paper.gif');background-repeat:no;}图片不平铺

body {background-image:url('paper.gif');background-repeat:no;background-position:right top;}图片不平铺且在右上

属性值顺序

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS学习—day1的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. css学习归纳总结（三） 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  3. css学习归纳总结（二） 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

  4. css学习归纳总结（一） 转

    原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...

  5. 【2016年特别福利】史上最全CSS学习资料大全

    css学习篇 [2016年特别福利]史上最全CSS学习资料大全

  6. 【转】css学习专题-BFC

    css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...

  7. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  8. html+css学习总结

    HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...

  9. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

随机推荐

  1. 2019-2020-1 20199303《Linux内核原理与分析》第九周作业

    进程的切换和一般执行过程 知识总结 操作系统原理中介绍了大量进程调度算法,这些算法从实现的角度看仅仅是从运行队列中选择一个新进程,选择的过程中运用了不同的策略而已. 对于理解操作系统的工作机制,反而是 ...

  2. 关于搭建IIS网页弹出登录框的解决方案

    今天自己搭建IIS服务器的时候,明明设置了匿名访问,但是用ie访问127.0.0.1的时候还是会弹出一个登陆框,最后在网上找到答案. 转自: https://blog.csdn.net/sunleib ...

  3. js 实现动画功能，完整解析插件版 可更改配置参数[animate.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写一个运动插件 基本功能: 补充 ...

  4. 15个Nodejs应用场景

    15个Nodejs应用场景 我们已经对Nodejs有了初步的了解,接下来看看Nodejs的应用场景. 2.1 Web开发:Express + EJS + Mongoose/MySQL express  ...

  5. 狄慧201771010104《面向对象程序设计（java）》第十六周学习总结

    实验十六  线程技术 实验时间 2017-12-8 一.知识点总结: 1.程序与进程的概念 ‐程序是一段静态的代码,它是应用程序执行的蓝本. ‐进程是程序的一次动态执行,它对应了从代码加载.执行至执行 ...

  6. 《Arduino实战》——3.4　小结

    本节书摘来异步社区<Arduino实战>一书中的第3章,第3.4节,作者:[美]Martin Evans ,Joshua Noble ,Jordan Hochenbaum,更多章节内容可以 ...

  7. 澳大利亚公共服务部门神速完成Win10部署：4个月完成44000台设备升级

    不到一年时间,澳大利亚公共服务部门已经完成Win10系统部署升级,涉及到全部的35000名员工.在2015年,澳大利亚公共服务部门IT员工告知微软,需要更创新的方式远程为居民提供服务,并且效率要更快. ...

  8. Character Array and Character Pointer

    最近复习数据结构实验时,碰到这么一行代码,看的有点不爽. typedef char** HuffmanCode; 借此梳理下数组和指针. int* p; //指针变量p中存的地址代表的内存单元中的数据 ...

  9. C语言编程入门题目--No.14

    题目:将一个正整数分解质因数.例如:输入90,打印出90=233*5. 程序分析:对n进行分解质因数,应先找到一个最小的质数k,然后按下述步骤完成: (1)如果这个质数恰等于n,则说明分解质因数的过程 ...

  10. Windows+Ubuntu双系统 ，Ubuntu安装

    这篇只是简单记录自己在Win10下另安装Ubuntu系统. 不是教程,因为不会. 推荐一个教程:https://blog.csdn.net/weixin_37029453/article/detail ...