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:表示对象文 ...
随机推荐
- JSON.parse和eval的区别
JSON.parse和eval的区别 JSON(JavaScript Object Notation)是一种轻量级的数据格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是Jav ...
- 深入Nginx
Nginx功能模块汇总 --with-http_core_module #包括一些核心的http参数配置,对应nginx的配置为http区块部分 --with-http_access_module # ...
- 数据库模型设计PowerDesigner
Power Designer 是Sybase公司的CASE工具集,使用它可以方便地对管理信息系统进行分析设计,他几乎包括了数据库模型设计的全过程.利用Power Designer可以制作数据流程图.概 ...
- MariaDB 多主一从 搭建测试
背景: 目前MySQL依然只支持一个Slave从一个Master复制数据,虽然也可以做到一主多备(M->S),双主复制(M<->M)等架构,但是局限性依然很大.由于项目的要求,需要各 ...
- Python3实现简单的爬虫功能
python3简单实现一个爬去网站图片的小功能: 有时候想要下载自己喜欢的多个图片时,不需要一个个点击来下载,使用python脚本批量拉取,并保存到本地. 1. 首先找到自己要下载图片的url 2. ...
- mongoosejs学习地址
http://mongoosejs.com/docs/api.html#querystream-js Node的小基友supervisor 和 forever 不要忘记了,相信你会喜欢他们的:) ht ...
- linux svn 搭建
原文:http://jingyan.baidu.com/article/3c343ff7039de20d37796306.html和http://blog.sina.com.cn/s/blog_670 ...
- IP地址的分类
IPv4 地址的分类: 一,组成 1. 使用32位地址 2. 以点分十进制表示,如172.16.0.0,每一个数字对应于8个二进制的比特串,称为一个位组(octets).如某一台主机的IP地址 ...
- Power BI for Office 365（四）Power View第一部分
Power View是一种可以创建动态的交互式报表的工具,并且支持丰富多样的图表类型,在Power View中创建的报表可以很容易地进行分享,以及供查看报表的用户对Power View报表进行交互.从 ...
- UVA 11481 Arrange the Numbers(组合数学 错位排序)
题意:长度为n的序列,前m位恰好k位正确排序,求方法数 前m位选k个数正确排,为cm[m][k],剩余m - k个空位,要错排,这m - k个数可能是前m个数中剩下的,也可能来自后面的n - m个数 ...