CSS 学习笔记
0、CSS概念
层叠样式表（Cascading Style Sheets）,CSS的来历就不必多说了。可以简单的理解为万维网联盟（w3c）为了丰富HTML页面的布局和外观而指定的一种标准。
1、CSS实例：
CSS规则主要由选择器和至少一条声明组成：
/*注释格式*/
p{
color:red;
text-align:center;
}
2、id 选择器和calss 选择器
/*id 是唯一的标签 id 为 idName 的那个标签会遵循以下样式*/
#idName
{
text-align:center;
color:red
}
/* class 是一类标签 ，样式表作用域下 页面中所有标签中类名为 className 的 都会遵循以下 样式*/
.className
{
text-align:center;
color:red
}
3、优先级：1，2，3，4 优先级依次升高
1、浏览器默认样式
2、外部样式
3、内部样式
4、内联样式
多重样式表会重叠为一个
外部样式表示例
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表示例：
<head>
<style>
hr
{
color:sienna;
}
p {
margin-left:20px;
}
body{
background-image:url("images/image.gif”);
}
</style>
</head>
内联样式表 示例：（在标签内写 style）
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
4、CSS背景：
background-color:
body {
/* CSS中 颜色的表示方法：
十六进制：”#ff0000”
RGB:”RGB(255,0,0)”
颜色名称：”red”
*/
background-color:#003344
}
background-image
body{
background-image:url(“xxx.jpg”);/* 默认图像只在水平和垂直方向平铺*/
}
background-repeat/*图像的重复方式*/
body{
background-image:url(“xxx.jpg”);
background-repeat:repeat-x;/* 图像只在水平方向平铺*/
}
background-attachment/*图像是否在页面上固定*/
body{
background-image:url(“xxx.jpg”);
background-attachment:fixed;/*固定背景图像位置*/
/*背景图像是否固定或者随着页面的其余部分滚动。默认 scroll 背景图片随页面的其余部分滚动。inherit 继承父元素
*/
}
background-position/*背景图像的位置*/
/*有9个位置可选，类似9宫格
left top center top right top
left center center center right center
left bottom center bottom right bottom
也可以使用百分百 x%，y%是默认值 左上角 0%0%（前一个数字代表水平偏移量，后一个代表垂直偏移量）
也可以xpos ypos （前一个数字代表水平偏移量，后一个代表垂直偏移量）
ps:用百分比会有一个特殊的算法，
0% 0% 图像的左上角会和父元素的左上角重合，
50% 50% 图像会在 父元素的正中间，
100% 100% 图像的右下角会与父元素的右下角重合
inherit 继承自父元素
*/
body{
background-position:right top;/*控制背景图像的位置*/
}
/*背景简写：简写时 属性值顺序： color image repeat attachment position*/
body {
background:#ffffff url(image.png) no-repeat right top;
}
background-size
{
background:url(image/xxx.gif);
background-size:100% 100%;/*拉伸并占满真格背景作用域*/
}
/*background-Origin属性指定background-position属性应该是相对位置注意如果背景图像background-attachment是"固定"，background-origin属性没有任何效果。*/
/* background-clip属性指定背景绘制区域
*border-box默认值。背景绘制在边框方框内（剪切成边框方框）。
*content-box 背景绘制在内容方框内（剪切成内容方框）。
*padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
*/
body
{
/*多个背景图片*/
background-image:url(/upload/love/css.gif),url(/upload/love/html.gif);
}
5、text 文字
5.1 text color 文本个颜色
W3C标准规定：如果你定义了颜色属性，那么你还必须定义背景色属性
body{
color:blue;
}
h1 {
color:#00ff00;
}
h2{
color:rgb(255,0,0);
}
5.2 text-align 文本对齐方式
h1{
text-align:center;
}
p.date {
text-align:right;
}
p.main{
text-align:justify;
}
5.3 text-decoration 修饰
h1{
text-decoration:overline;/* 文本上面划线*/
}
h2{
text-decoration:line-through;/*文本中间划线 */
}
h3{
text-decoration:lint-underline;/*文本下部划线*/
}
h4 {
text-decoration : blink;/* 定义闪烁文本*/
}
/* 还可以是 none 和 inherit */
5.4 text-transform :uppercase 文本 转大写
/*text-transform:lowcase 文版转小写 text-transform:capitalize 首字母大写*/
p.uppercase{
text-transform:uppercase
}
5.5 text-indent: 文本缩进
p {
text-indent:5px;
}
/*主要属性：
属性 描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
*/*
5.6 direction 文字方向
ltd 默认 left to right 默认，文本方向从左到右
rtl right to left 文本方向 从右到左
inherit 规定应该从父元素 继承direction 属性值
5.7 letter-spacing
字母间距
h1 {
letter-spacing:2px; /* 默认 normal 还可以继承 inherit*/
}
h2{
letter-spacing:-3px;
}
5.8 line-hight 行高
p.small {
line-height:90%;
}
p.big{
ling-hight:200%;
}
5.8 text-shadow：基本文字阴影
text-shadow: h-shadow v-shadow blur color;
/*h-shadow: 必须 水平阴影的位置： 允许为负值
*v-shadow: 必须 竖直阴影的位置： 允许为负值
*blur : 可选 模糊距离
*color: 阴影的颜色
*/
5.9 vertical-align:text-top
设置一个元素的垂直对齐
值 描述
/*baseline 默认。元素放置在父元素的基线上。
*sub 垂直对齐文本的下标。
*super 垂直对齐文本的上标
*top 把元素的顶端与行中最高元素的顶端对齐
*text-top 把元素的顶端与父元素字体的顶端对齐
*middle 把此元素放置在父元素的中部。
*bottom 把元素的顶端与行中最低的元素的顶端对齐。
*text-bottom 把元素的底端与父元素字体的底端对齐。
*length
*% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
*inherit 规定应该从父元素继承 vertical-align 属性的值。
*/*
5.10 white-space: 段落中空白属性
/*
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应 该从父元素继承 white-space 属性的值。
*/*
5.11 word-spacing:30px; 定义单词间的距离为 30px
6、a样式连接
a：link - 正常，未被访问过的连接
a:visited 用户已经访问过的连接
a:hover 当用户鼠标放在连接上时
a:active 当用户点击的那一刻
a:link {
color:#FF0000;
} /* unvisited link */
a:visited {
color:#00FF00;
} /* visited link */
a:hover {
color:#FF00FF;} /* mouse over link */
a:active {
color:#0000FF;} /* selected link */
CSS 学习笔记的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- CSS学习笔记：溢出文本省略（text-overflow）
原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...
随机推荐
- Python基本数据类型
一.整数 int(整形) 在32位机器上,整数的位数为32位,取值范围为-2**31~2**1-1,即-2147483648-2147483647 在64位系统上,整数的位数为64位,取值范围为-2* ...
- nginx error_log 错误日志配置说明
nginx的error_log类型如下(从左到右:debug最详细 crit最少): [ debug | info | notice | warn | error | crit ] 例如:error_ ...
- getRealPath("/")弃用
用request.getSession().getServletContext().getRealPath("/");替换getRealPath("/"):
- ecshop商品子分类点击下拉，子分类空时，直接跳转功能
模板文件循环读取商品分类,并给大分类加上url属性.然后在js中判断是否有下级分类.有分类则点击下拉效果,没有子分类则跳转到url属性的链接去. themes/**/library/category_ ...
- laravel安装笔记
一.安装composer 安装之前将\php\php.ini文件中的php_openssl.dll扩展库开启,否则composer在安装过程中会出现错误提示. (我在安装过程中发现apache目录下的 ...
- SSO 单点登录实现
.NET基于Redis缓存实现单点登录SSO的解决方案 http://www.cnblogs.com/yinrq/p/5276628.html 共享cookie的方案 http://www.codep ...
- 转：asp.net TreeView CheckChanged 事件浅谈
http://blog.csdn.net/xiage/article/details/5128755 在开发中经常可以碰到类似的问题: 想通过一个树父节点的TreeNodeCheckChanged 事 ...
- Android：联系人Contacts之ContentResolver query 参数详解
注:本片整理自 http://blog.csdn.net/wssiqi/article/details/8132603 1.获取联系人姓名 一个简单的例子,这个函数获取设备上所有的联系人ID和联系人N ...
- nfs的挂载方法
对于很多嵌入式驱动开发者,要进行很多次调试,如果nfs搭建不起来,那么对开发是很不方便的.经过三天,我终于把自己编的内核下载到开发板,并实现了nfs文件系统的挂载.今天把过程写下来. 思路 一 编译a ...
- 搭建高可用MongoDB集群（一）：配置MongoDB
在大数据的时代,传统的关系型数据库要能更高的服务必须要解决高并发读写.海量数据高效存储.高可扩展性和高可用性这些难题.不过就是因为这些问题Nosql诞生了. NOSQL有这些优势: 大数据量,可以通过 ...