2-CSS基本样式讲解

最新推荐文章于 2024-08-10 22:43:21 发布

张鹿鹿

最新推荐文章于 2024-08-10 22:43:21 发布

阅读量1k

点赞数 1

分类专栏： CSS3基础文章标签： css

本文链接：https://blog.csdn.net/u013144863/article/details/52326284

版权

CSS3基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本人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

收藏

觉得还不错? 一键收藏
0
评论
2-CSS基本样式讲解

本人github地址CSS背景 CSS允许应用纯色作为背景, 也允许使用背景图像创建相当负责的效果CSS的背景属性属性描述 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-color 设置元素的背景颜色 background-image 背景图片设置 background-position
复制链接

扫一扫

专栏目录