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

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。每个属性有一个值。属性和值被冒号分开。CSS声明总是以分号(;)结束，声明总以大括号({})括起来:

2 CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:    /*这是另一个注释*/

3  id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。CSS 中 id 选择器以 "#" 来定义

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

#para1

{

    text-align:center;

    color:red;

}

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p>这个段落不受该样式的影响。</p>

</body>

</html>

4 class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。在 CSS 中，类选择器以一个点"."号显示：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

.center

{

    text-align:center;

}

</style>

</head>

<body>

<h1 class="center">标题居中</h1>

<p class="center">段落居中。</p>

</body>

</html>

5 可以指定特定的HTML元素使用class。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

p.center

{

text-align:center;

}

</style>

</head>

<body>

<h1 class="center">这个标题不受影响</h1>

<p class="center">这个段落居中对齐。</p>

</body>

</html>

6 每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

<head>

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

</head>

可以使用 <style> 标签在文档头部定义内部样式表

<head>

<style>

hr {color:sienna;}

p {margin-left:20px;}

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

</style>

</head>

7 多重样式优先级：内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

8 默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。如果图像只在水平方向平铺 (repeat-x),垂直方向平铺是 (repeat-y),不平铺是 no-repeat

body

{

background-image:url('gradient2.png');

background-repeat:repeat-x;

}

9 text-decoration 属性用来设置或删除文本的装饰。

10 font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

11 设置文字的大小与像素h1 {font-size:40px;}              1em和当前字体大小相等       h1 {font-size:2.5em;}

12

当设置为若干链路状态的样式，也有一些顺序规则：

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面

13

14 分组选择器

h1,h2,p

{

    color:green;

}
嵌套：
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

15  使用百分比设置高度

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

html {height:%;}

body {height:%;}

img.normal {height:auto;}

img.big {height:%;}

img.small {height:%;}

</style>

</head>

<body>

<img class="normal" src="logocss.gif" width="" height="" /><br>

<img class="big" src="logocss.gif" width="" height="" /><br>

<img class="small" src="logocss.gif" width="" height="" />

</body>

</html>

16 隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间

17 块级元素(block)特性：

  • 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
  • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

  • 和相邻的内联元素在同一行;
  • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

利用CSS可以改变元素的类型，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

  • display:block  -- 显示为块级元素
  • display:inline  -- 显示为内联元素
  • display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

18 position 属性指定了元素的定位类型。

position 属性的五个值：

19 CSS overflow 属性用于控制内容溢出元素框时显示的方式。可以控制内容溢出元素框时在对应的元素区间内添加滚动条

20 水平居中块级元素 (如 div), 可以使用 margin: auto;

.center {

    margin: auto;

    width: %;    注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

    border: 3px solid green;

    padding: 10px;

}

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:

21

css 学习笔记 菜鸟的更多相关文章

  1. CSS学习笔记

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

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

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

  3. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  4. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  5. HTML+CSS学习笔记(4) - 认识标签（3）

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  6. HTML+CSS学习笔记（3）- 认识标签（2）

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  7. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  8. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  9. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

随机推荐

  1. jenkins最新版下载安装

    前提:安装配置 jetty 在线下载jetty# wget http://download.eclipse.org/jetty/8.1.17.v20150415/dist/jetty-distribu ...

  2. 学习记录：《C++设计模式——李建忠主讲》7.“领域规则”模式

    领域规则模式:在特定领域中,某些变化虽然频繁,但可以抽象为某种规则.这时候,结合特定的领域,将问题抽象为语法规则,从而给出该领域下的一般性解决方案. 典型模式:解释器模式(Interpreter). ...

  3. 以php中的算数运算符操作(整型,浮点型,字符串型,布尔型,空类型)数据

    // 环境 // // php版本 // PHP 7.0.33-0+deb9u1 (cli) (built: Dec 7 2018 11:36:49) ( NTS ) // Copyright (c) ...

  4. golang之new函数

    另一个创建变量的方法是调用用内建的new函数.表达式new(T)将创建一个T类型的匿名变量,初始化为T类型的零值,然后返回变量地址,返回的指针类型为 *T . p := new(int) // p, ...

  5. dotnet Core学习之旅(一):安装SDK

    [重要:文中所有外链不能确保永久有效] >环境 .NET Core 包含两个部分 .NET Core Runtime 和 .NET Core SDK(包含Runtime) 点击此处到达下载页面( ...

  6. js 自定义加减乘除方法（防止js自身计算错误）

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. vue设置input不可编辑切换

    html: <Input name="a" v-model="formValidate.coName" placeholder="请输入姓名&q ...

  8. jvm--工具

    jps (java process status) == ps / top 作用:显示所有运行中的java进程. jstat 作用:查看类装载,内存,垃圾收集,jit编译的信息. jinfo 作用:实 ...

  9. 网页调试js时，如何知道某个事件对应哪段js代码？

    有时候我们需要知道某个事件对应的js代码,比如点击一个div元素时,出现下拉框,我想知道这个功能对应的js代码,那就可以按下图操作: 勾选click事件,重新运行,那么就会在每个click事件那里设置 ...

  10. 测试库异常down分析(abnormal instance termination)

    客户测试库,down问题分析,根据alert 的问题指向,实例异常终止,但是无其它有价值的信息 Terminating the Instance Due to Error Out-Of-Memory( ...