<style type="text/css">

* { padding:0; margin:0; }

.box h2 {

  //内边距左边的距离
  padding-left:10px;

  //内边距左边的距离
  padding-right:10px;

  //边框有无、宽度和颜色

  border: 1px solid #000;

  //背景的高度
  height:100px;

  //背景的宽度
  width: 100px;

  //背景颜色
  background:#87b0e1;
  line-height:30px;

  //文字的颜色
  color:#fff;

  //文字的大小
  font-size:14px;

  //文字左右对其,可以使得div横向排列
  float:left;

  //去掉a标签的下划线

  text-decoration: none;

  //在ul里面写去掉li前面的小圆点

  list-style-type: none;

  //relative定位的时候使用width会影响上一级元素的width,把上一级元素的宽度撑大,absolute不会

    在a{}中使用width是文本的宽度,在ul中使用时ul的宽度,即是所有li的宽度的和

    在a{}中使用width要使用display:block

  position:relative和absolute

  //h1标签的默认大小为200%

  //h2标签的默认大小为150%

  //h3标签的默认大小为115%

  //使用text-align对容器内的容器进行居中的时候,需要在内部容器中的文字的属性上加上display:none,否则不能居中,比如<p><a href="#">菜 单</a></p>,

  需要在.box p a的属性中加上display:none和text-align:center

  //在给内部的a标签加上了width和height之后,居中的效果将失效,要再加上margin:0 auto才能使得居中的效果再次显示出来

  //图像的左侧和右侧均不允许出现浮动元素:

  //使用clear:both

  

  //设置元素的位置坐标的时候要修改position:absolute,否则修改坐标位置不发生改变

  //使用jquery的show()方法的时候,要先在css中加上display:none;才能使用.show("fast");

  //给label设置了宽度后,想要使得label的内容在这一宽度范围中向右对其,要写float:left;text-align:right;

  //使用top=0;left=o;right=0;bottom=0;margin=auto;positon:absolute;来使得元素在页面中处于中心

}
</style>

CSS学习笔记——CSS选择器样式总结的更多相关文章

  1. CSS学习笔记之选择器

    目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...

  2. CSS学习笔记(1):选择器

    一.元素选择器 HTML文档元素就是最基本的选择器 如: <!DOCTYPE html> <html lang="en"> <head> < ...

  3. Html和Css学习笔记-css进阶-盒模型

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  4. Html和Css学习笔记-css基础知识

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  5. CSS 学习笔记——CSS Selector

    CSS1 中定义的选择器 类型选择器 用于选择指定类型的元素(其实他就是 html 标签选择器),常见用法如下: body { /*对 body 元素定义样式*/ } body,div { /*同时选 ...

  6. CSS学习笔记——CSS中定位的浮动float

    昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...

  7. CSS学习笔记之基本介绍

    1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...

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

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

  9. CSS学习笔记之样式声明

    目录 1.背景 2.文本 3.字体 4.列表 5.表格 6.轮廓 在这篇文章中你能看到有关于 CSS 样式设置的常用属性,文章的目录如下: 1.背景 (1)背景颜色 可以使用 background-c ...

随机推荐

  1. 给li设置float浮动属性之后,无法撑开外层ul的问题。(原址:http://www.cnblogs.com/cielzhao/p/5781462.html)

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  2. 转 -- linux IO子系统和文件系统读写流程

    我们含有分析的,是基于2.6.32及其后的内核. 我们在linux上总是要保存数据,数据要么保存在文件系统里(如ext3),要么就保存在裸设备里.我们在使用这些数据的时候都是通过文件这个抽象来访问的, ...

  3. [转]Mybatis3.x与Spring4.x整合

    原文地址:http://www.cnblogs.com/xdp-gacl/p/4271627.html 一.搭建开发环境 1.1.使用Maven创建Web项目 执行如下命令: mvn archetyp ...

  4. javascript 公共方法 集合

    数组去重: Array.prototype.unique1 = function () { var n = []; //一个新的临时数组 for (var i = 0; i < this.len ...

  5. zabbix的使用

    1,zabbix运行流程 2功能特性 1数据收集 2灵活触发器 3高度可定制告警 4实时绘图功能 5web监控能力 6多种可视化展示 7历史数据存储 8配置容易 9API功能 10.......... ...

  6. Asp.Net MVC<一> : 三层架构、MVC

    MVC.MVP.MVVM.Angular.js.Knockout.js.Backbone.js.React.js.Ember.js.Avalon.js.Vue.js 概念摘录 认清Android框架 ...

  7. jquery的ajax提交form表单

    $.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#yourformid').serialize(),// ...

  8. C#-WinForm-进程、线程

    进程:一个程序就是一个进程,也有可能一个程序需要多个进程来支持的情况,比如QQ 点击按钮打开记事本,静态方法 public partial class Form3 : Form { public Fo ...

  9. ASP.NET MVC 4 异步加载控制器

    ASP.NET 4 Developer preview中的异步操纵器 在放弃了对.NET 3的支持之后, ASP.NET MVC 4 彻底拥抱了Task类库, 你不需求再蛋疼的给每个Action写两个 ...

  10. 转发;Dota英文名

    http://esports.17173.com/content/2011-02-17/20110217163225753.shtml 有的英雄的名字真的很漂亮,也给那些学校里英文各种悲剧的同鞋增加点 ...