2-CSS基本样式讲解

来源：互联网发布：商洛java培训班课程编辑：程序博客网时间：2024/04/27 15:06

本人github地址

CSS背景

CSS允许应用纯色作为背景, 也允许使用背景图像创建相当负责的效果

CSS的背景属性

属性描述 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-color 设置元素的背景颜色 background-image 背景图片设置 background-position 设置背景图片的起始位置 background-repeat 设置背景图片是否及如何重复

background-attachment:

fixed: 背景图不随着向下滑动而滑动
scroll: 随着滚动 (默认)

background-position:

right : right和center, 会将图片的中间显示在右边
right top: 将图片的顶部显示在右边
…..(以此类推)

也可以添加数值, 和百分数(较常用)

background-repeat :

no-repeat 图片不重复
repeat-x x轴重复
repeat-y y轴重复

CSS3背景

background-size: 规定背景图片的尺寸
background-origin: 规定背景图片的定位位置
background-clip: 规定背景的绘制区域

CSS文本

CSS文本属性可定义文本外观
通过文本属性, 可以改变文本的颜色, 字符间距, 对齐文本, 装饰文本, 对文本缩进

属性描述 color 颜色 direction 文本方向 line-height 行高 letter-spacing 字符间距 text-align 对齐元素中的文本 text-decoration 向文本添加装饰 text-indent 缩进元素中文本的首行 text-transform 元素中的字母 unicode-bidi 设置文本方向 white-space 元素中空白的处理方式 word-spacing 字间距

h3{    /*首行缩进两字符*/    text-indent: 2em;}#p1{     /*首字母大写*/     text-transform: capitalize;}#p2{    /*全部小写*/    text-transform: lowercase;}#p3{    /*全部大写*/    text-transform: uppercase;}

CSS3文本效果
1, text-shadow: 向文本添加阴影

p{     /*参数说明:  居左 居上 阴影清晰度 阴影颜色*/     text-shadow: 5px 5px 1px #FF0000;}

效果:

这里写图片描述
2, word-wrap: 规定文本的换行规则

p {    /*如果当前文字是英文, 不会把当前的单词拆开*/    /*必须指定宽度否则无法换行*/    width: 100px;    /*自动换行*/    text-wrap: normal;}

效果:
这里写图片描述

CSS字体

CSS字体属性定义文本的字体系列, 大小, 加粗, 风格和变形

属性描述 font-family 设置字体系列 font-size 字体尺寸 font-style 字体风格 font-variant 以小型大写字体或正常字体显示文本 font-weight 字体的粗细

/*可以使用这种方式将字体引入到网页中*/@font-face {    font-family: myfont;    src: url();}

CSS链接

1, 链接的四种状态;

a:link 普通的, 未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻

2, 常见的链接样式 :
text-decoration 属性大多用于去掉链接中的下划线(可以设置为none)
background-color: 北京颜色

示例代码

a:link{    color: #f00;}a:visited{    color: #0f0;}a:hover{    color: #000;}a:active{    color: #00f;}

这里写图片描述

CSS列表

CSS列表属性允许你放置改变列表标志, 或者将图像作为列表项标志

属性描述 list-style 简写列表项 list-style-image 列表项图像 list-style-position 列表项标志位置 list-style-type 列表类型

补充: class和id的简单区别:

1, id是不允许重复的, 而class是可以重复的, 可以把id看成省份证号, class看成姓名, 一般用于框架设计上
2, 资源加载上, id先找到结构内容, 再加载样式, 而class先加载好样式, 再去找结构内容

ul.ul1{    list-style-type: circle;    list-style-position:inside;}ul.ul2{    list-style-image:url("1.png");    list-style-position:outside;}

CSS表格

1, CSS表格属性可以帮助我们极大地改善表格外观

2, 表格边框

3, 折叠边框

4, 表格宽高

5, 表格文本对齐

6, 表格内边距

7, 表格的颜色

html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="style.css"></head><body><table id="tb">    <tr>        <th>姓名</th>        <th>年龄</th>        <th>性别</th>    </tr>    <tr class="alt">        <td>小王</td>        <td>20</td>        <td>男</td>    </tr>    <tr>        <td>小王</td>        <td>20</td>        <td>男</td>    </tr>    <tr class="alt">        <td>小王</td>        <td>20</td>        <td>男</td>    </tr></table></body></html>

style.css

#tb, tr, th, td {    /*表格边框*/    border: 2px solid bisque;    text-align: center;    padding:5px;}#tb {    width:500px;    /*合并边框*/    border-collapse: collapse;}/*表头*/#tb th{    text-align: center;    /*背景颜色*/    background-color: aqua;    color: #FFFFFF;}#tb tr.alt td {    color:black;    background-color: aquamarine;}

这里写图片描述

CSS轮廓

轮廓的主要是为了突出元素的作用

属性描述 outline 设置轮廓属性 outline-color 设置轮廓的颜色 outline-style 设置轮廓的样式 outline-width 设置轮廓的宽度

outline-style: 有实线, 虚线等等

1 0