CSS基本样式学习笔记.doc

CSS层叠样式表1. CSS基本语法 标记 属性：属性值； 属性：属性值；示例：h1 color: red; font-size: 50px;在这个选择器中，规定了h1标记的样式2. CSS背景 允许使用纯色，图片或者更复杂的效果作为背景background-attachment:背景图像是否固定或者随着页面的其余部分滚动 ;background-color:设置元素的背景颜色;background-image: 把图片设为背景;background-position: 设置背景图片的起始位置;background-repeat: 设置背景图片是否及如何重复;背景颜色body background-color: blue;p width: 200px;/*设定p标签的宽度*/ padding: 10px;/*设定p标签的内边距*/ background-color: red;/*设定p标签的背景颜色*/背景图片（使用url引进图片）body background-image: url(290a065468724578.jpg);p width: 300px; background-image: url(290a065468724578.jpg);设置背景是否及如何重复body background-image: url(290a065468724578.jpg); background-repeat: no-repeat;/*不允许重复*/ background-repeat: repeat;/*x,y轴都重复*/ background-repeat: repeat-x;/*x轴重复*/ background-repeat: repeat-y;/*y轴重复*/设置图片的起始位置background-position: bottom;/*从下边开始*/background-position: center;/*从中间开始*/background-position: left;/*从左边开始*/background-position: right;/*从右边开始*/background-position: top;/*从上边开始*/设置图片的起始位置的属性有两个值，一般会写成background-position: top center;第一个值top代表插入的背景图片从网站的上部插入，第二个值center代表从插入的图片的哪个部位开始显示，这里是从中间显示。当然，这两个值可以是具体的数字，比如0px，100px，就是代表紧贴左边，距离上边边100px的地方开始插入，也可以是百分数设置图片是否随着内容而滚动body background-attachment: fixed;/*设置背景图片随着内容的移动而移动*/ background-attachment: local;/*设置背景图片不随着内容的移动而移动，所以会出现只有内容而没有背景图片的情况*/ background-image: url(./image/pdd.jpg); background-position: top left;/*从上边开始*/ background-repeat: no-repeat;/*不允许重复*/CSS3背景background-size: 300px 500px;/*设定背景图片的大小*/background-origin: padding-box;/*设定背景图片的定位区域*/background-clip: content-box;/*规定背景的绘制区域*/3. CSS文本 CSS文本属性可定义文本外观，通过文本属性，可以改变文本的颜色，字符间距，对其文本，装饰文本，对文本缩进等效果。常用属性有： color: /*文本颜色*/; direction: /*文本方向*/; line-height: /*设定行高*/; letter-spacing: /*字符间距*/; text-align: /*对齐元素中的文本*/; text-decoration: /*向文本添加修饰*/; text-indent: /*缩进元素中文本的首行*/; text-transform: /*元素中的字母*/; unicode-bidi: /*设置文本方向*/; white-space: /*元素中空白的处理方式*/; word-spacing: /*设置字间距*/;基本文本样式示例：查看颜色以及对齐方式在样式中，可以看到并没有给p标记设定颜色，只是给了body设定颜色，但是字体显示了body中的颜色，由此得出这是继承了body中的颜色属性。有时候，我们并不希望文本靠左显示，而是希望居中或者靠右显示，这就用到了对其文本的样式，下面详细讲对其样式中的各个值得特点对齐元素中的文本,center是居中对齐,right,end是靠右对齐，justify,left是默认的靠左对齐。在p标记样式中，给出了宽度，也就是说该元素每一行显示的字数是有限制的，如果字数太多一行装不下就需要换行，但是没一个段落都希望在第一行空出一定的间隔，这叫做首行缩进，首行缩进中的值有：length，选中后自动变成px的单位，指每一段的首行缩进多少像素；hanging，正常的不缩进样式；percentage，以百分比的形式进行缩进。 this is a story:Then the old woman became very angry because the cat had not killed the mouse. She began to hit the cat. The cat said, Do not hit your old servant. I have worked for you for many years, and I would work for you still, but I am too old.Do not be unkind to the old, but remember what good work the old did when they were young. 上述三段英文经过text-transform属性设置后，第一段用capitalize值把每个单词的第一个字母变成大写，其他的字母无论大小写都不变化，第二段用 lowercase值把所有的字母变成小写，第三段用 uppercase值把所有的字母变成大写p background-color: beige; width: 500px; text-align: justify; text-indent: each-line;#p1 text-transform: capitalize;#p2 text-transform: lowercase;#p3 text-transform: uppercase;#j1 color: red;body color: darkblue;CSS3的文本效果 text-shadow: /*向文本添加阴影*/; word-wrap: /*规定文本的换行规则*/;给文本加上阴影特效给文本添加阴影的效果，text-shadow有四个属性值，第一个是文字背景相对于这个文字来说距离左边的位置，第二个值是距离当前文本的上方的位置，第三个是浮雕的清晰度的设计，越小越清晰；第四个值是阴影颜色设定文本的换行规则有normal和break-word两个,normal的换行标准是：如果单词过长，会冲出边界，即会在当前行显示；break-word ： 将内容在边界内换行，当单词在当前行放不下时，会自动切换到下一行，即单个单词超长，在下一行显示She began to hit the cat. The cat said, Do not hit your oldlsjduwservant. I have worked for you for many years, and I would work for you still, but I am too old.ShebegantohitthecatThecatsaid,DonothityouoldksawhdservantIhaveworkedforyouformanyyearsand I would work for you still, but I am too old.#p1 background-color: beige; width: 500px; text-shadow:5px 5px 0px #E42017; word-wrap: normal; /*规定文本的换行规则*/#p2 width: 500px; word-wrap: break-word; /*规定文本的换行规则*/#p3 width: 500px; word-wrap: normal; /*规定文本的换行规则*/4. CSS字体 CSS的字体属性定义文本的字体系列，大小，加粗，风格和变形 font-family: /*设置字体系列，即是宋体或者其它等*/; font-size: /*设置字号，即字体大小*/; font-style: /*设置字体风格*/; font-variant: /*以小型大写字体或正常字体显示文本*/; font-weight: /*设置字体的粗细*/;示例：CSS文件中设置字体的样式有的时候，所用的字体可能别的浏览器没有，这时候我们就需要通过font-face来设计自己的字体样式并上传到服务器即可p font-family: 微软雅黑, 宋体; /*设置字体系列，即是宋体或者其它等*/ font-size:50px; /*设置字号，即字体大小*/font-face font-family: 设置字体名称; src: url();/*指定字体的来源*/5. CSS链接 CSS的四种状态： a;link: 普通的，未被访问的状态; a:visited:用户已经访问的链接; a:hover:鼠标位于链接上方的效果;a:active:链接被点击的时刻;需要注意的是：在定义的时候，hover必须位于link和visited后面，active必须位于hover后面示例：这是个链接a:linkcolor: blue;text-decoration: none;background-color: darkgreen;a:visited color: aqua;a:hover color: red;a;active color: black; 常见的链接样式：text-decoration属性大多用于去掉链接中的下划线，且应用在link中background-color: 用于设定超链接的背景颜色6. CSS列表 CSS列表属性允许放置，改变列表标志，或者将图像作为列表项标志。 list-style: /*简写列表项*/; list-style-image: /*列表项图像*/; list-style-position: /*列表项标志位置*/; list-style-type: /*列表类型*/;示例：list-style-type有以下几个属性值：circle，指定列表前面为空心圆；decimal，指定列表前面为数字；disc，指定黑色实心圆，是默认的；还有很多属性值，可以多尝试一下。如：list-style-type:disc;有时候，可以不使用默认的而是使用自定义的图片，就需要list-style-image中的url值来引进要现实的图像，如：list-style-image: url(./image/pdd.jpg); /*列表项图像*/ 看以下效果 苹果 香蕉 橘子 柠檬看以下效果 苹果 香蕉 橘子 柠檬 .ul1 list-style-position: inside;.ul2 list-style-position: outside;以上展示的是列表项标志位置的属性，有两个属性值，第一个比第二个多出几个空格。7. CSS表格 CSS表格属性能够帮助我们改善表格的外观表格边框：将行与列分开折叠边框：将边框中的两条线合成一条线，如下#tb border-collapse: collapse;表格宽高：对表格设置宽高，就是整个表格的宽高，如果对tr,th,td等设计，那么他们的宽高也会改变。表格文本对其：表格内部的文字进行对其操作，center是居中，right靠右，left靠左，match-parent是内容靠左，表头居中。表格内边距：表格颜色示例： 姓名 年龄 性别 张三 20 男 张三 20 男 #tb,tr,th,td border: 1px solid aqua; text-align: center; b