CSS笔记集合
- CSS全称为层叠样式表，主要是用于定义HTML内容在浏览器内的显示样式。
- CSS样式由选择符和声明组成，而声明又由属性和值组成。
- CSS中注释语句：/*注释语句*/。Html中使用<!--注释语句-->。JS使用//。
- 从CSS 样式代码插入的形式来看分为以下3种：内联式、嵌入式和外部式三种。
- 内联式css样式表就是：<p style="color:red"></p>。
- 嵌入式css样式，就是可以把css样式代码写在<style>标签之间。
- 外部式css样式是把css代码写在一个以“.css”为扩展名的文件中，在<head>内使用<link>标签将css样式文件链接到HTML文件内。还可以在<style>最开始处用导入式@import，但是导入式是在读取html文件后加载，其余三个都是同时加载。
- 优先级：就近原则（离被设置元素越近优先级别越高）。
- 嵌入式中<style>中的部分。选择器{样式;}。选择器指明了{}中的样式的作用对象。 id不要滥用，谨慎使用。适当使用class。
- 标签选择器：<p> || p{}
- 类选择器：<h1 class="xx"> || .xx{color:red;}
- ID选择器：<hi id="xx"> || #xx{ color:green;}。
- 区别：ID选择器只能在文档中使用一次，类选择器可用多次。类选择器可为一个元素同时设置多个样式，ID选择器不可以。
- 子选择器：.food>li{border:1px solid red;}。使food下面li的子元素改变。
- 包含选择器：.first span{color:red;}，使first名下所有span子元素改变。
- 区别：>作用于元素的第一代后代，空格作用于元素的所有后代。
- 通用选择器：* {color:red;}。
- 伪类选择器：鼠标滑过的状态：<a herf="http"> || a:hover{color:red;}。
- 分组选择符：<h1><span> || h1,span{color:red;}。标签选择器的二合一使用。
- 继承：<p><span></span></p>，继承是span也会随p改变样式。但{border}不可继承。
- 特殊性：为同一个元素设置不同CSS，启用哪个看权值。标签的权值为1，类选择符为10，ID选择符为100。继承为0.1。
- 层叠：如果同一个元素有多个CSS且权值相同，那么按就近原则。
- 重要性：<p color:red!important;> !important设置最高权值，注意写在分号前面。
- 文字排版
- 字体：{font-family:"宋体";}
- 大小：{font-size:12px;}
- 颜色：{color:#666;}
- 加粗：{font-weight:bold;}
- 斜体：{font-style:italic;}
- 下划线：{text-decoration:underline;}
- 删除线： {text-decoration:line-through;}
- 段落排版
- 缩进：{text-indent:2em;}
- 行高：{line-height:1.5em;}
- 字母间距：{letter-spacing:50px;}
- 单词间距：{word-spacing：50px;}
- 对齐：{text-align:center/left/right;}
- 背景样式
- 列表样式
- 列表项标记位置
- 元素分类：在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
- 块状元素：<div>、 <p>、<h1>、<form>、<ul> 和 <li>。{display:block}就是将元素显示为块级元素，或将内联元素转化为块级元素。特点是自己另起一行，元素的高度、宽度、行高以及顶和底边距都可设置，元素宽度在不设置的情况下，是它本身父容器的100%。
- 内联元素（行内元素）:<span>、<a>、<label>、 <strong> 、<em>。{display:inline}将元素设置为内联元素。特点是在一行，元素的高度、宽度及顶部和底部边距不可设置，元素的宽度就是它包含的文字或图片的宽度，不可改变。
- 内联块状元素：<img>、<input>。{display:inline-block}就是将元素设置为内联块状元素。特点是在一行。元素的高度、宽度、行高以及顶和底边距都可设置。
- 盒模型：可以把块状元素看成一个大箱子，里面东西（指的是其他元素）随便放（当然最好要放的下），我也可以随便改箱子的大小；而内联元素是一层保鲜膜，它的大小是根据包裹这的东西而定的，不能随意改变；而内联块状元素则是小箱子，他只能装一件东西，但是大小可以改变。
- 边框：合并起来写的代码为{border：10px（线宽） dashed（虚线）/dotted（点线）/solid（实线） red/#888；}。
- 单独设置边框：{border-top\bottom\right\left:1px solid red;}
- CSS宽/高：height/width。元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
- 填充：元素内容与边框之间的距离，填充增大也会把边框的位置扩张开。填充也可分为上、右、下、左(顺时针)。如下代码：{padding:20px 10px 15px 30px;}。{padding:10px;}全为10.{pading:10px 20px;}10px为上下。
- 边界：元素与元素之间的距离。如下代码：div{margin:20px 10px 15px 30px;}，如填充。
- 流动布局模型：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，块状元素的宽度都为100%。内联元素都会在所处的包含元素内从左到右水平分布显示。
- 浮动布局模型：用 CSS 定义为浮动，{float:left\right}。清除浮动clear可以当做单独的class使用，同固定高度的用法。
- 层布局模型：对每个图层精确定位操作。分为绝对、相对、固定定位。
- 绝对定位{position: absolute;left:20px;top:100px;}：这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如相对于body元素。
- 相对定位(position: relative)：它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
- 固定定位(position: fixed)：与absolute定位类型类似，但它的相对移动的坐标是屏幕内的网页窗口本身，它不会随浏览器窗口的滚动条滚动而变化，这与background-attachment:fixed;属性功能相同。
- 盒代码缩写：margin:10px（top、right、bottom、left的值相同）;
- margin:10px（top和bottom值相同） 20px（left和 right的值相同）;
- margin:10px 20px（left和right的值相同） 30px;
- 颜色缩写：如果每两位的值相同，可以缩写一半}p{color: #336699;}可以缩写为：p{color: #369;}
- 字体缩写：{font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif;} 可以缩写为一句：{font:italic small-caps bold 12px/1.5em "宋体",sans-serif;}
- 使用这一简写方式至少要指定 font-size 和 font-family 属性，其他的属性未指定将自动使用默认值。在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
- 英文命令颜色
- RGB颜色：红绿蓝 {color:#852dc8;} {color:rgb(20%,33%,25%);}
- 十六进制颜色：{color:#00ffff;}
- 长度单位：px（像素）、em、rem、% 百分比，要注意其实这三种单位都是相对单位。
- 水平居中设置-行内元素：text-align:center
- 水平居中设置-定宽块状元素：{margin：20px auto;}
- 水平居中设置-不定宽度的块状元素方法一：加入 table 标签。table{margin:0 auto;} 或者display:table; margin:0 auto;
- 水平居中设置-不定宽度的块状元素方法二：改变块级元素为行内元素，然后使用 text-align:center 来实现居中效果。
- 水平居中设置-不定宽度的块状元素方法三：通过给父元素设置float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
- 垂直居中-父元素高度确定的单行文本：通过设置父元素的 height 和line-height高度一致来实现的。line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
- 垂直居中-父元素高度确定的多行文本（方法一）：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
- 垂直居中-父元素高度确定的多行文本（方法二）：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
- 隐性改变display类型：有一个有趣的现象就是当为元素（display:none 除外）设置以下 2 个句之一： 1. position : absolute 2. float : left 或 float:right 简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
CSS笔记集合的更多相关文章
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- JavaScript基础笔记集合（转）
JavaScript基础笔记集合 JavaScript基础笔记集合 js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译 js存放的位置 html脚本必须放在&l ...
- CSS笔记--选择器
CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...
- <代码整洁之道>、<java与模式>、<head first设计模式>读书笔记集合
一.前言 几个月前的看书笔记 ...
- c#基础笔记-----------集合
首先所谓集合是用于管理对象的容器类.一方面集合将独立的对象汇集成群集,作为一个群集来管理,以便进行整体性操作:而另一方面,集合可以方便地获取群集中的个体,进行个体化操作.在.Net中,集合被封装为对象 ...
- html css 笔记
cursor其他取值 鼠标移入 auto :标准光标 default :标准箭头 pointer :手形光标 wait ...
- HTML+CSS笔记 CSS中级 一些小技巧
水平居中 行内元素的水平居中 </a></li> <li><a href="#">2</a></li> &l ...
- HTML+CSS笔记 CSS中级 颜色&长度值
颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{co ...
- HTML+CSS笔记 CSS中级 缩写入门
盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15p ...
随机推荐
- 测试使用markdonw写博客
# 欢迎使用 Cmd Markdown 编辑阅读器 ------ 我们理解您需要更便捷更高效的工具记录思想,整理笔记.知识,并将其中承载的价值传播给他人,**Cmd Markdown** 是我们给出的 ...
- Mybatis 增强工具包 Mybatis-Plus
原文:https://www.oschina.net/p/mybatis-plus
- [转] ASPNET Core 中获取应用程序物理路径
如果要得到传统的ASP.Net应用程序中的相对路径或虚拟路径对应的服务器物理路径,只需要使用使用Server.MapPath()方法来取得Asp.Net根目录的物理路径,如下所示: // Classi ...
- ViewFlipper实现ViewPager的页面切换效果
activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
- html5 虚拟键盘弹出挡住底部的输入框解决方案
问题描述: 我们使用 h5 做移动网站开发时,如果文本框在页面的下方,当输入信息弹出的软键盘会将输入框挡住(Android 会有这个问题,IOS会自动将整个页面上移),IOS中软键盘关闭后,页面上移的 ...
- android studio 0.8.1使用和遇到问题解决
谷歌6月底公布了五大系统,而且android studio同步升级到了android studio 0.8.1.升级了的android studio确实有一些新的变化.执行速度变快,而且还能够选择开发 ...
- 一张图告诉你是须要 SQL 还是 Hadoop
译序 非常多朋友问时下如火如荼的 Hadoop 是否适合引进我们自己的项目,什么时候用 SQL.什么时候用 Hadoop,它们之间怎样取舍?Aaron Cordova 用一张图来回答你这个问题,对于不 ...
- 通过uri呼起本地app
1.在Android本地app清单文件里配置 <activity android:name="com.mdj.ui.WelcomeActivity" android:scre ...
- 2016/1/17 笔记 1,面向对象编程OOP 2,类 全
面向对象编程OOP 编程方式的发展 1,面向过程 重用性低 维护工作量大 2,面向对象 重用性高 维护容易 概念 1,对象 Object 一个具体的事物 是类的实例 2,类Class 同一 ...
- mystr = '{}{}{}'.format(mystr, random.randint(0, 9), adurl)
mystr = '{}{}{}'.format(mystr, random.randint(0, 9), adurl)