摘要：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. 使用sqlmap结合dnslog快速注入

    0x01 起因 实际项目中遇到一个oracle延时注入,需要获取数据,几十个库几百张表,等找到关键数据不知道要到哪天. 测试支持带外请求 于是想用使用sqlmap利用DNS进行OOB注入 0x02 阿 ...

  2. window servet 2012 r2 配置php服务器环境

    绑定:https://jingyan.baidu.com/article/0bc808fc2c6a851bd485b92a.html 配置环境:http://www.jb51.net/article/ ...

  3. 替换字符串sql

    update [表名] set 字段名 = replace(与前面一样的字段名,'原本内容','想要替换成什么') UPDATE `zjl_III_hei_zlj_20151111`.`ctrl_ne ...

  4. JAVA企业级应用TOMCAT实战（一）

    一. Tomcat简介 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.Sun和其他一些公司及个人共 ...

  5. LeetCode7-ReverseInteger

    LeetCode7-ReverseInteger LeetCodeeasyOverflow 题目 题目所在链接为 LeetCode-7:ReverseInteger 题目描述 给出一个32位的有符号整 ...

  6. Alpine Linux 3.9.2 发布，轻量级 Linux 发行版

    开发四年只会写业务代码,分布式高并发都不会还做程序员?   Alpine Linux 3.9.2 已发布,Alpine Linux 是一款面向安全的轻量级 Linux 发行版,体积十分的小. Alpi ...

  7. 老男孩教育每日一题-2017年3月29日-使用ifconfig取出网卡eth0的ip地址-看看你有多少方法...

    方法1:sed命令 [root@oldboyedu ~]# ifconfig eth0 |sed -n '2p' |sed's#^.*addr:##g'|sed 's#  B.*$##g' 10.0. ...

  8. Java泛型和编译优化的一个例子

    public class Main { public static void main(String[] args) { ArrayList<String> strList = new A ...

  9. React Hooks总结

    Hook 前言 什么是Hook 自从 16.8 版本开始,hooks 的出现使得你可以在不编写 class 的情况下使用状态管理以及其它 React 的特性. 那么在 React Hooks 出现之前 ...

  10. 金钱货币用什么类型--（Java）

    0.前言 项目中,基本上都会涉及到金钱:那么金钱用什么数据类型存储呢? 不少新人都会认为用double,因为它是双精度类型啊,或者float, 其实,float和double都是不能用来表示精确的类型 ...