1.调用

　　　内部样式表：

　　　css可以直接在html代码里面使用</style></style>节点。允许html代码中有两个style节点，但是起作用的是靠后的节点

　　　

　　如图的代码，起作用的是最后一个

　　<style>
　　h3{font-size:20pt;color:black;}
　　</style>

　　外部样式表：

　　在<head></head>节点中使用<link rel='stylesheet'  type='text/css'   href='css文件位置' /> 代码来调用css代码

　　多重样式表：

·　　这个放在后面再说

2.注释

　　html：<!-- 注释内容 --> 进行注释。

　　css：·/* 注释内柔 */ 进行注释。

　　这里再说一下其他语言的注释方法(参考：https://blog.csdn.net/tim_st/article/details/78185807)

　　C/C++/C#
　　行注释：//这里是注释
　　块注释：/*这里是注释*/

　　Java
　　行注释：//这里是注释
　　块注释：/*这里是注释*/

　　JavaScript
　　行注释：//这里是注释
　　块注释：/*这里是注释*/

　　XML
　　块注释：<!--这里是注释-->

　　Python
　　行注释：#这里是注释
　　块注释：'''这里是注释'''

　　PHP

　　行注释：// 这里是注释

　　块注释：/* 这里是注释内容 */

　　SQL Server/Oracle PLSQL
　　行注释：--这里是注释
　　块注释：/*这里是注释*/

　　MySQL
　　行注释：--这里是注释
　　行注释：#这里是注释
　　块注释：/*这里是注释*/

　　VB

　　行注释：'这里是注释

　　汇编语言

　　行注释：;这里是注释

　　perl

　　行注释：# 这是一个单行注释

　　块注释：

　　=pod

　　这里是注释
　　=cut

3.背景

  • background-color   #颜色
  • background-image　 #图片
  • background-repeat     #平铺方式
  • background-attachment        #背景图是否固定
  • background-position      #位置

　　background-image:url(图片名)。如background-image:url('img.jpg')（不是位置，图片应放在代码同目录下）

　　background-repeat：repeat-x(水平平铺)，repeat-y(垂直平铺)，no-repeat(不平铺)

　　background-attachment：

　　

　　background-position：

　　

　　然后可以采用简写属性，如body {background:#ffffff url('img_tree.png') no-repeat right top;}

　　简写属性对应关系为：

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

 4.选择器

　　选择器分为id选择器和class选择器，作用效果相同，可以通过特定的id或class对一组元素进行处理。

　　id选择器使用#id值{}。如<p id="part1">Hello World!</p> id选择器：#part1{ text-align:center; color:red;}

　　class选择器使用p.class值{}(只有p节点内有class属性的时候，可以写为.class值{})。如<p class="part2">Hello World!</p> id选择器：.class2{ text-align:center; color:red;}

　　值得注意的是：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

　　　　　　　　　类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

　　　　　　　　（火狐事真多　　　　==）

5.文本属性

　　color：颜色

　　text-align：对齐方式

　　text-decoration：文本修饰(主要用于消除下划线)

　　text-transform：文本转化(大小写转化或首字母大小写转化)

　　text-indent：文本缩进

　　letter-spacing：字符之间的距离

　　line-height：行与行之间的距离

　　direction：文本方向(从右到左)

　　word-spacing：单词之间的距离(前面那个是字符)(中文无效)

　　white-space:元素环绕

　　vertical-align：图片对齐方向

　　text-shadow：添加文本阴影

　　值得注意的事： 对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。

　　font ：

　　　　font-family：设置字体系列

　　　　font-style：设置字体样式

　　　　font-size：设置字体大小(为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。em的尺寸单位由W3C建议。1em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em)

　　　　font-weight：设置字体粗细

　　　　font-variant：设置小型大写字体

6.链接

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

　　如 a:link {color:#000000;}

　 　   a:visited {color:#00FF00;}

　　    a:hover {color:#FF00FF;}

　　    a:active {color:#0000FF;}

css内容还有很多，这里先写一部分

CSS学习笔记_1的更多相关文章

  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. Linux下修改MySQL数据库数据文件路径

    使用rpm安装方式安装完MySQL数据库后,数据文件的默认路径为/var/lib/mysql,然而根目录并不适合用于存储数据文件. 原路径:/var/lib/mysql 目标路径:/home/mysq ...

  2. java月考题JSD1908第二次月考（含答案和解析）

    考试 .container { clear: both; margin: 0 auto; text-align: left; /*width: 1200px;*/ } .container:after ...

  3. JUC-6-Callable接口

    创建线程的方式                  不能有返回值,且不能声明抛出异常                                                           ...

  4. 深入了解angularjs中的$digest与$apply方法，从区别聊到使用优化

     壹 ❀ 引 如果有人问,在angularjs中修改模型数据为何视图会同步更新呢,我想大多数人一定会回答脏检查(Dirty Checking)相关概念.没错,在angularjs中作用域(scope) ...

  5. 记druid 在配置中心下的一个大坑： cpu 达到 100%

    把我们的dubbo 应用移步到配置中心上去之后,发现我们的应用过一段时间就会出现cpu 100%的情况 (大概是12个小时),一开始cpu占用是2-5% 的样子,什么都没做,后面竟然用尽了cpu.. ...

  6. Key Management: Hardcoded Encryption key 密钥管理：硬编码加密密钥

  7. spi-mem: 为SPI存储器生态带来一些一致性

    在本文中,我们将介绍关于spi-mem Linux内核框架的工作,该框架将允许在SPI NOR设备和常规SPI设备以及SPI NAND设备上复用SPI控制器驱动程序. 从SPI到双线.四线.八线SPI ...

  8. SpringBoot系列——Jackson序列化

    前言 Spring Boot提供了与三个JSON映射库的集成: Gson Jackson JSON-B Jackson是首选的默认库. 官网介绍: https://docs.spring.io/spr ...

  9. 精通awk系列(10)：awk筛选行和处理字段的示例

    回到: Linux系列文章 Shell系列文章 Awk系列文章 awk数据筛选示例 筛选行 # 1.根据行号筛选 awk 'NR==2' a.txt # 筛选出第二行 awk 'NR>=2' a ...

  10. Java生鲜电商平台-电商会员体系搭建

    Java生鲜电商平台-电商会员体系搭建 说明:因为之前一直从事的是B端的生鲜电商方面的产品,对会员体系方面有深刻的理解,今天来聊一聊会员体系的搭建. 明确会员体系的目的 首先我们需要明确的知道,搭建电 ...