Css学习

向右看齐 2022-05-26 05:26 211阅读 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、水平导航栏

![70][]

<!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的时候就是没有透明

[70]: /images/20220526/7659c468e42140a0a7d40feb28769735.png