HTML和CSS入门（2）

客官°小女子只卖身不卖艺 2022-06-06 04:21 138阅读 0赞

## CSS入门 ##

**1.样式调用方式**  
（1）行内样式：  
`<any style="样式名：样式值;"></any>`  
常见样式：  
对齐方式：text-align： center/left/right/justify;  
字体大小：font-size：XXpx;  
字体颜色：color：red;  
背景颜色：background-color：pink;  
首行缩进：text-indent：2em;

（2）页面内样式（在head中定义）：

*  P\{\}

这时候`<p>`中所有内容样式都按照在`<style>`中定义的样式来，想要单独改变某一`<p>`中的样式，单独在这个标签中添加style即可，**因为行内优先级大于页面内**。

*  类定义

<head>
        <style> .box{ color:lightblue; } </style>
    </head>
    <body>
    <p class="box">
        one
    </p>
    </body>

定义的格式：.自定义名称\{\}  
**调用时不加点，在页面中可以多次调用**

*  id定义

<head>
        <style> #box{ color:lightblue; } </style>
    </head>
    <body>
    <p id="box">
        </body>

**整个页面中只能使用一次，多用于定义大框架**

（3）链接式  
链接页面外的样式，在CSS（File–New–Stylesheet)中定义：

.littlebox{ color:pink; }

在HTML中链接：

（4）导入式

<head>
        <style> @import url(连接外部的css文件); </style>
    </head>
    <body>
    <p class="littlebox">
        one
    </p>
    </body>

**2.站点**：包含css、img和html的工程叫做站点  
![这里写图片描述][SouthEast]创建站点的标准形式

**3.DIV**：`<div></div>`  
在css中设置div的属性

.sky{ margin: 0 auto;/*外边距：居中;margin:a(上) b(右) c(下) d(左)*/ border: solid 1px red;/*边框线：实线 1像素 颜色*/ /*solid实线/dashed虚线/double双线/dotted点线*/ width: 800px; height: 600px; background: darkgray url(../img/1.jpg) no-repeat center top; /*背景：颜色 图片（路径） 重复 水平位置 垂直位置*/ padding: 1px;/*内边距：padding：a(上) b（右） c（下） d（左）*/ }

在HTML中调用：

效果图：

![这里写图片描述][SouthEast 1]

**4.定义图片属性**：

p img{ float:left;/*左浮动*/ }

设置前：  
![这里写图片描述][SouthEast 2]  
设置后：  
![这里写图片描述][SouthEast 3]

**5.定义文本**

p{ line-height: 25px;/*行间距*/ font-weight: bold;/*字体加粗*/ font-style: italic;/*斜体*/ font-style: normal;/*正常字体*/ text-decoration: none/underline/overline;/*去下划线/加下划线/加上边线*/ }

**6.超链接的四种状态（伪对象）**

*  a:link 默认状态
 *  a:hover 鼠标悬停时的样式
 *  a:active 鼠标点击时的样式
 *  a:visited 超链接访问后的样式  
    写四种状态时的顺序：link>visited>hover>active

默认状态：![这里写图片描述][SouthEast 4]  
悬停状态：![这里写图片描述][SouthEast 5]  
点击时状态：![这里写图片描述][SouthEast 6]  
访问后状态：![这里写图片描述][SouthEast 7]

[SouthEast]: /images/20220606/74f6785bc60746a58b825775f2dca643.png
[SouthEast 1]: /images/20220606/c666893732db45088cf2fdbf0e480412.png
[SouthEast 2]: /images/20220606/bee7348975a14a089de4ccb02db48256.png
[SouthEast 3]: /images/20220606/298e86a456954a61ae8bde7aca7429c1.png
[SouthEast 4]: /images/20220606/e9d58f8c5c0e4a8b9b63b9c806d68464.png
[SouthEast 5]: /images/20220606/62fd4e2762ed41bfbd3680b0bf0c3b9a.png
[SouthEast 6]: /images/20220606/182ebbc55de74ec78466c63e3d690da9.png
[SouthEast 7]: /images/20220606/6273a7c6ef9d4c35bce09d469de14fa8.png