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. Java生鲜电商平台-生鲜系统中商品订单系统售后系统设计

    Java生鲜电商平台-生鲜系统中商品订单系统售后系统设计(服务订单履约系统) 说明: 电商之下,我们几乎能从电商平台上买到任何我们日常需要的商品,但是对于很多商品来说,用户购买发货后,只是整个交易流程 ...

  2. sqoop 安装与使用

    Sqoop(发音:skup)是一款开源的工具,主要用于在Hadoop(Hive)与传统的数据库间进行数据的传递,可以将一个关系型数据库(例如 : MySQL ,Oracle ,Postgres等)中的 ...

  3. idea常用快捷键大全

    Idea常用快捷键大全,拿小本本记下来,忘记了可以方便查找. 编写代码 Ctrl+Shift + Enter,语句完成. “!”,否定完成,输入表达式时按 “!”键. Ctrl+E,最近的文件. Ct ...

  4. NPM 问题汇总

    1. Error: setuid user id does not exist Error: setuid user id does not exist at /usr/local/lib/node_ ...

  5. Python中的四种交换数值的方法

    交换两个变量的值方法,这个面试题如果只写一种当然很简单,没什么可以说的. 今天这个面试是问大家有几种办法来实现交换两个变量的值. 在没开始看具体答案前,你可以先想想看 下面分别来说说这几种方法 方法一 ...

  6. ES、kibana安装及交互操作

    一.ES的安装与启动 1.ES安装(Windows环境) 下载地址:https://www.elastic.co/cn/downloads/past-releases#elasticsearch 版本 ...

  7. 一文读懂分布式任务调度平台XXL-JOB

    本文主要介绍分布式任务调度平台XXL-JOB(v2.1.0版本),包括功能特性.实现原理.优缺点.同类框架比较等 基本介绍 项目开发中,常常以下场景需要分布式任务调度: 同一服务多个实例的任务存在互斥 ...

  8. cesium 雷达扫描(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  9. Android Studio 3.0+ Record Espresso Test 自动化测试

    准备工作 1.将android studio 版本升级到3.0+2.百度下载夜神模拟器 夜神模拟器的基本设置 PS:以上就是夜神模拟器的基本设置 Android Studio 连接夜神模拟器 //夜神 ...

  10. Windows下Kafka 2.3.0的下载和安装

    Kafka是由Apache软件基金会开发的一个开源流处理平台,是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者在网站中的所有动作流数据. 特性:(1)通过O(1)的磁盘数据结构提供消息的持久化 ...