首页 > 代码库 > CSS 基本样式

CSS 基本样式

2024-09-11 21:39:54   217人阅读

1.CSS 背景：

css 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果

属性描述
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-color 设置元素的背景颜色
background-image 把图片设置为背景
background-position 设置背景图片的起始位置
background-repeat 设置背景图片是否及如何重复 
body{
   background-image: url("python.png");
   background-repeat: no-repeat;
}

 

body{
   background-image: url("python.png");
   background-repeat: no-repeat;
   background-position:center top;
}

2.css3 背景　　

background-size 规定背景图片的尺寸
background-origin 规定背景图片的定位区域
background-clip 规定背景的绘制区域 
body{
   background-image: url("python.png");
   background-repeat: no-repeat;
   background-size：100px 100px;
 
}

 css 样式-文本

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

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

字间距

举例

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <p>查看颜色</p>
        <h1>标题查看颜色</h1>
    </body>
</html>

style.css文件

body{
   color: aqua;
}

 

CSS 链接

　　

CSS 链接的四种状态：

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

举例看一下当鼠标移到；链接附近时的反应

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css test</title>
    <script src="app.js"></script>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body >

<a href="http://www.shiyanlou.com">shiyanlou</a>


</body>
</html>

test.css

a:link {color:#FF0000;}    /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}  /* 正在被点击的链接 */

 

2CSS 设置链接背景颜色

修改对应的属性 background-color 

根据上面的链接 ，可以是这样的

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

 

3 修改链接下划线

 link 属性中加入 text-decoration 属性

 

CSS 列表

CSS 列表允许防止、改变列表标志，或者将图片作为列表项标志。 

1 列表类型

而 list-style-type 这个属性我们就可以用来控制标记类型

 

2 列表项图片

用 list-style-image 属性

ul.img1{list-style-image:url("4.ico")}
ul.img2{list-style-image: url("11.ico")}
<ul class="img1">
    <li>shiyanlou</li>
    <li>shiyanlou</li>
    <li>shiyanlou</li>
    <li>shiyanlou</li>
</ul>

<ul class="img2">
    <li>shiyanlou</li>
    <li>shiyanlou</li>
    <li>shiyanlou</li>
    <li>shiyanlou</li>
</ul>

 

3  简写列表样式

li {list-style : url(example.gif) square}

CSS 表格

在表格的学习中我们主要了解以下属性：

border-collapse ---设置是否把表格边框合并为单一的边框。

border-spacing ---设置分隔单元格边框的距离。

caption-side --- 设置表格标题的位置。

empty-cells ---设置是否显示表格中的空单元格。

table-layout ---设置显示单元、行和列的算法。

 

 

CSS 轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。涉及到的属性有：

outline 在一个声明中设置所有的轮廓属性。

outline-color 设置轮廓的颜色。

outline-style 设置轮廓的样式。

outline-width 设置轮廓的宽度。

<p id="p1">shiyanlou is my home</p>
<p id="p2">shiyanlou is my home</p>
#p1{
    outline-color: #FF704D;
    outline-style: groove;
    outline-width: 10px;
}

#p2{
    outline-style: dotted;
    outline-color: green;
    outline-width: 5px;

}

 

CSS 基本样式


联系
我们