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. 开源框架 openFrameworks

    转自:https://www.cnblogs.com/lidabo/p/9134174.html 此处仅供学习,版权属原作者: 作为一个图形图像方向的研究生,我经常都在和 OpenGL .OpenCV ...

  2. Dynamics 365中使用计算字段自动编号字段实时工作流自动生成分组编码加流水号的自动编号字段值

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  3. Android动态添加碎片

    我们编写一个能够用过按钮动态更替碎片的APP,首先在主页上显示第一个碎片,点击按钮后可以替换到第二个碎片,或者删除已经替换掉的第二个碎片. 一.MainActivity.java import and ...

  4. CROSS-ENV不同环境配置

    项目背景 为了适应h5环境搭建需求,需要动态配置开发,测试,生产三种对应域名及其及打包命令.使用cross-env可以让配置环境更加清晰明了还好管理. 简介 cross-env的作用是不需要全局配置N ...

  5. iOS 裁剪工具

    下载 demo和工具下载链接SPClipTool 使用说明 [[SPClipTool shareClipTool] sp_clipOriginImage:pickerImage complete:^( ...

  6. linux 系统账户 和 普通账户 的区别

    最近使用 useradd -r 选项进行创建账户,用于测试,对-r 选项不是很明白,下面记录一些调研的过程: -r, --system Create a system account. System ...

  7. 零基础想学习C语言，没资源、没人带、不知道从何开始？

    初学编程的小伙伴经常会遇到的问题,1.没资源 2.没人带 3.不知道从何开始 ? 小编也是从新手期过来的,所以很能理解萌新的难处,现在整理一些以前自己学习买来的一些资料送给大家,希望对广大初学小伙伴有 ...

  8. 如何将本地的项目推送到github

    一.创建密钥 1.本地终端命令行生成密钥 访问密钥创建的帮助文档:https://help.github.com/en/github/authenticating-to-github/generati ...

  9. drf请求模块分析

    一.drf请求模块 .drf的request是在wsgi的request基础上再次封装 .wsgi的request作为drf的request一个属性:_request .新的request对旧的req ...

  10. Dubbo学习系列之十四（Seata分布式事务方案AT模式）

    一直说写有关最新技术的文章,但前面似乎都有点偏了,只能说算主流技术,今天这个主题,我觉得应该名副其实.分布式微服务的深水区并不是单个微服务的设计,而是服务间的数据一致性问题!解决了这个问题,才算是把分 ...