Css学习

最新推荐文章于 2024-10-11 15:13:15 发布

代码敌敌畏

最新推荐文章于 2024-10-11 15:13:15 发布

阅读量201

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/sm16111/article/details/80086796

版权

Web 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

Css

1、CSS 属性定义背景效果：

background-color //背景颜色

background-image //背景图片

background-image:url('/statics/images/w3c/logo.png');

background-repeat //对背景图像进行平铺 background-repeat:repeat-x;//向x轴平铺

background-attachment //设置背景图像是否固定或者随着页面的其余部分滚动。

background-position //定义背景图片位置 background-position:right top;

2、文本效果

文本可居中或对齐到左或右,两端对齐. text-align:center; //center可改成right或者left

每一行被展开为宽度相等，左，右外边距是对齐 text-align:justify;

删除链接下划线 text-decoration:none;

文本第一行的缩进 text-indent:50px;

文本间隔 word-spacing:30px;

中心对齐 margin:auto;

3、字体效果

文字大小 font-size:40px;

文字斜体 font-style:italic; //也可是'宋体'

文字加粗 font-weight:bold;

4、链接样式

a:link - 正常，未访问过的链接 a:link {color:#FF0000;} /* unvisited link */

a:visited - 用户已访问过的链接 a:visited {color:#00FF00;} /* visited link */

a:hover - 当用户鼠标放在链接上时 a:hover {color:#FF00FF;} /* mouse over link */

a:active - 链接被点击的那一刻 a:active {color:#0000FF;} /* selected link */

5、边框效果

无边框 border-style:none;

黑色边框 border-style:solid;

边框颜色 border-color:red;

直接概况 border: 1px solid #000000; 第一个是尺寸第二个是样式第三个是颜色

6、隐藏效果

visibility:hidden; 隐藏但是要占空间

display:none；移除隐藏起来

7、浮动效果

float:right; 向右浮动

float:left;向左浮动
width:150px;
height:90px;
margin:5px; 间隔

8、列表效果

display:inline; li水平排列

list-style-type:none; 前面没有序号

9、导航栏

1、水平导航栏

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

10、下拉菜单

先隐藏起来

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
然后鼠标移动到就显示
.dropdown-content {
    display: block;
}

11、图片效果

透明：opacity:0.4; 当为1的时候就是没有透明