【[CSS3] 学习笔记-CSS3盒子样式】的更多相关文章

[CSS3] 学习笔记-CSS3盒子样式

1.盒子的类型 在CSS3中,使用display来定义盒子的类型,包括block,inline,inline-block类型.div元素和P元素,属于block类型,span元素和a元素,属于inline类型. <head> <style> /*div默认是block类型,span默认是inline类型,以下通过display,将它们的类型反过来了*/ div{ background-color: red; display:inline; } span{ background-co…

[CSS3] 学习笔记--CSS盒子模型

1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,border内,属性有5个: padding:设置所有边距 padding-bottom:设置底边距 padding-left:设置左边距 padding-right:设置右边距 padding-top:设置上边距 3.边框 我们可以创建效果出色的边框,并且可以应用于任何元素.边框的样式为border-st…

[CSS3]学习笔记-CSS基本样式讲解

1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="styl…

[CSS3] 学习笔记-CSS3选择器详解（一）

1.属性选择器 在CSS3中,追加了3个属性选择器,分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> /*id包含div字符串,就加载效果*/ [id*=div]{ color:lime; }…

[CSS3] 学习笔记-CSS3常用操作

1.对齐操作 使用margin属性进行水平对齐:使用position进行左右对齐:使用float属性进行左右对齐. <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <link href="1.css" type="text/css" rel="stylesheet&quo…

CSS3学习笔记(3)-CSS3边框

p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; padding: 5px; margin: 1em 0 1em 0; } .alexrootdiv>div>p:first-of-type,.alextitlep{ font-size: 18px; font-weight: bold; color: red; } .alexrootdiv spa…

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

HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码: <p style="color:red">这里文字是红色.</p> 注意要写在元素的开始标签里,下面这种写法是错误的: <p>这里文字是红色.</p…

微信小程序开发：学习笔记[3]——WXSS样式

微信小程序开发:学习笔记[3]——WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS与Web开发中的CSS类似.为了更适合小程序开发,WXSS对CSS做了一些补充以及修改. 文件组成 项目公共样式:根目录中的app.wxss为项目公共样式,它会被注入到小程序的每个页面. 页面样式:与app.json注册过的页面同名且位置同级的WXSS文件.比如注册了pages/rpx/index页…

CSS3学习笔记之linear-gradient

我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HTML在我看来也是很值得研究的,只有时刻保持一个谦逊的姿态,才能够看得更远,走得更稳. 在这里要感谢一下网站: w3cplus,W3School ,W3C 等等一些网上的教程啊博客什么的(还有好多就不一一列举了),我算是从这些地方开始接触传说中的CSS3和HTML5,而自己的学习笔记自然也会从中借鉴. 建议:大…

十天精通CSS3学习笔记 part1

http://www.imooc.com/learn/33 第1章 初识CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了. 在编写CSS3样式时,不同的浏览器可能需要不同的前缀.它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都…