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. Android 日期对话框 DatePickerDialog

    private int year; private int monthOfYear; private int dayOfMonth; @Override protected void onCreate ...

  2. 百度大脑UNIT3.0详解之知识图谱与对话

    如今,越来越多的企业想要在电商客服.法律顾问等领域做一套包含行业知识的智能对话系统,而行业或领域知识的积累.构建.抽取等工作对于企业来说是个不小的难题,百度大脑UNIT3.0推出「我的知识」版块专门为 ...

  3. Bash脚本编程之算术运算

    简介 Bash所支持的算术运算和C语言是一样的,这里指的是操作符(operator)以及它们的优先级(precedence).结合性(associativity)和值,详见Shell Arithmet ...

  4. linux中关于权限的一些事

    权限这个东西对于初学者来说可能会有点陌生,不过不要紧,看完下面的讲解应该会对你有一定的帮助 权限rwx rwxrwxrwx  u     g    o         a r:可读      4 w: ...

  5. 什么是spring框架？spring特点与好处,使用spring框架的好处是什么？

    转载:https://blog.csdn.net/hht006158/article/details/80181207. Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Ja ...

  6. 理解OAuth2

    目录 理解OAuth2 Oatuh2用来做什么 Oauth2具体做法 Oauth2的流程 授权码模式 第三方引导用户跳转至认证服务器的授权页面 用户选择是否给予授权 认证服务器生成code并且让用户重 ...

  7. Appium 使用笔记

    零.背景 公司最近有个爬虫的项目,先拿小红书下手,但是小红书很多内容 web 端没有,只能用 app 爬,于是了解到 Appium 这个强大的框架,即可以做自动化测试,也可以用来当自动化爬虫. 本文的 ...

  8. Netty服务端NioEventLoop启动及新连接接入处理

    一 Netty服务端NioEventLoop的启动 Netty服务端创建.初始化完成后,再向Selector上注册时,会将服务端Channel与NioEventLoop绑定,绑定之后,一方面会将服务端 ...

  9. SVN安装简介

    博主最近换个份工作,代码管理用的是SVN,因为之前用的Git管理代码的,SVN没接触过,既然公司中要用,就学习下使用吧.从最基本的安装开始吧. SVN官网:https://tortoisesvn.ne ...

  10. Android WebView与H5联调技巧

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/78 背景: 突然想写一篇关于Android WebView ...