极客学院----H5的相关笔记----css基础（二）

来源：互联网发布：最牛的请假条淘宝编辑：程序博客网时间：2024/06/05 06:53

一.css的样式----背景

1.背景颜色

body{    background-color: gray;}p{    width: 70px;    padding: 10px;    background-color: aqua;}

2.背景图片

body{    background-image: url("bg.jpg");    /* 第一个是图片显示的位置，第二个是从图片的哪个位置开始显示 */    /*background-position: right top;*/    /*background-position: 10% 30%;*/    /* 第一个是距x轴的距离，第二个是距y轴的距离 */    background-position: 10px 100px;    /* 默认允许重复 */    background-repeat: no-repeat;    /* 背景图片是否随着页面滚动，默认随着 */    background-attachment: fixed;//不随着}p{    width: 70px;    padding: 10px;    background-image: url("itembg.jpg");}

3.css3的样式

(1)规定图片的大小

backgroud-size:100px 100px;

(2)规定背景图片的定位区域-->相当于从哪儿开始（只限制左和上）

p{ width: 70px;    border: 10px dotted black;    padding: 30px; background-image: url("bg.jpg");   此属性不能在“backgroud-attachment:fixed”时使用   background-origin: content-box;//border-box/padding-box   background-repeat: no-repeat;}

(3)规定背景的绘制区域（上下左右都限制）

backgroud-clip:content-box;// border-box/padding-box

二.css样式---文本

1.css提供的：可以改变文本颜色，文字对齐方向，首行缩进（单位用em）等等。

2.css3提供的：

(1)text-shadow:距左5px 距上5px 清晰度1px（值越大越不清晰）颜色#ffffff

(2)word-wrap:规定文本的换行规则

三.css样式---字体

1.引用系统提供的：font-family:fantasy;

2.引用自己下载的：

@font-face{font-family: myFirstFont;src: url('字体名称.ttf') ,url('字体名称.eot'); /* IE9只支持.eot格式的字体 */}

四.css样式---链接
1.链接的四种状态
a:link 普通的、未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
eg:css中：a:link{color:#ff0000;}...
2.常见的链接方式
text-decration:多用于去除下滑线的作用，写到link中即可，这样所有的情况都不会有下划线了
3.设置背景颜色
backgroud-color

五.css样式---列表
1.list-style-type:提供了列表项前面的标识符
2.list-style-image:可以自定义标识符，显示某个图片 eg.list-style-image:url("图片名字.jpg");

六.css样式---表格
eg.
css：

#tb,th,tr,td{    /* 边框的粗细和颜色 */    border: 1px solid black;    /* 文字居中 */    text-align: center;    /* 背景颜色 */    background-color: burlywood;}#tb{    /* 折叠边框 */    border-collapse: collapse;    /* 宽高 */    width: 300px;    /*height: 300px;*/    /* 内边距 */    padding: 10px;}#tb tr.alt td{    background-color: cornflowerblue;}#tb th{    background-color: darkgray;    /* 字的颜色 */    color: aqua;}

html:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>css样式---表格</title>    <link rel="stylesheet" href="table.css" type="text/css"></head><body>    <table id="tb">        <tr>            <th>姓名</th>            <th>年龄</th>            <th>性别</th>        </tr>        <tr>            <td>张三</td>            <td>20</td>            <td>男</td>        </tr>        <tr class="alt">            <td>李四</td>            <td>21</td>            <td>女</td>        </tr>        <tr>            <td>张三</td>            <td>20</td>            <td>男</td>        </tr>        <tr class="alt">            <td>李四</td>            <td>21</td>            <td>女</td>        </tr>    </table></body></html>

七.css样式---轮廓
1.轮廓主要是突出元素的作用
outline:设置轮廓属性,可包含多个属性
outline-color:设置轮廓的颜色
outline-style:设置轮廓的样式
outline-width:设置轮廓的宽度

0 0