css样式

2024-01-08 22:29:34

# 1.CSS样式种类

## 1.1行内样式<标签内部添加属性>

代码分析：<div style="color:yellow;bcakground:yellow;">我和我的祖国<div/>

<body style="green"><body/>//页面背景颜色的填充

## 1.2内部样式<整个页面的内部>

格式分析：<style type="text/css">

标签{

属性 }

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

body{

background-color: burlywood;

}

div{

color: chocolate;

background-color: cyan;

}

</style>

</head>

<body>

<div>我和我的祖国</div>>

</body>

</html>

## 1.3外部样式

解析：链接CSS文件

## 1.4总结：三种样式优先级

```

优先级：行内样式>内部样式>外部样式

```

# 2.选择器

## 2.1基本选择器

### 2.11标签选择器

代码解析：

div{

color:blue;

}

</style>

### 2.1.2类选择器

```

.<!DOCTYPE html>

<head>

<title>Document</title>

.there{

color: cyan;

}

</style>

</head>

<body>

</body>

</html>

```

### 2.1.3ID选择器

```

.there{

color: cyan;

}

#one{

background-color: cyan;

}

#two{

background-color: darkblue;

}

</style>

</head>

<body>

</body>

</html>

```

### 2.1.4总结：三种基本选择器优先级

```

优先级：ID选择器>类选择器>标签选择器

```

## 2.2高级选择器

### 2.2.1层次选择器

```

后代选择器E F

代码分析：

body p{

background-color: darkblue;

}

</style>

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

</ul>

</body>

</html>

子选择器E>F

body>p{

background-color: darkblue;

}

</style>

相邻选择器E+F

代码分析：

p+span{

background-color: darkblue;

}

</style>

//有效果的是+后面的

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

</ul>

</body>

</html>

通用兄弟选择器E~F

代码分析：

p~ul{

background-color: darkblue;

}

</style>

//只显示兄弟，也就是~后面的，其本身不显示，也就是~前面的

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

</ul>

</body>

</html>

```

### 2.2.2结构伪类选择器<同类型中的第（n）个元素>

```

代码分析：

p:nth-of-type(3){

background-color: darkblue;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

```

### 2.2.3属性选择器

```

代码分析：

[class]{//【】里面的是属性

background-color: darkcyan;

}

</style>

</head>

<body>

<p class="asdfg">asdfg</p>

<p class="azxwf">azxwf</p>

<p title="avrhy">avrhy</p>

</body>

</html>

代码分析（绝对定位）

[class="a"]{ //参照 class="a"来写的

background-color: darkcyan;

}

</style>

</head>

<body>

<p class="a">asdfg</p>

<p class="azxwf">azxwf</p>

<p title="avrhy">avrhy</p>

</body>

</html>

^代表以xxx为开头的：【属性^="类引号里面元素值中的n个字母"】

[class^="a"]{

background-color: darkcyan;

}

</style>

</head>

<body>

<p class="asdfg">asdfg</p>

<p class="azxwf">azxwf</p>

<p title="avrhy">avrhy</p>

</body>

</html>

$代表的是以xxx为结尾的（类后面的引号中的元素值）

[class$="f"]{

background-color: darkcyan;

}

</style>

</head>

<body>

<p class="asdff">asdff</p>

<p class="azxwf">azxwf</p>

<p title="avrhy">avrhy</p>

</body>

</html>

```

# 3.CSS实战

## 1.文本常用标签

### 1.1<span>标签（凸显文本）

```

代码分析：<把内容放在span标签里，然后用内部样式渲染>

<!DOCTYPE html>

<head>

<title>Document</title>

span{

background-color: darkgreen;

}

</style>

</head>

<body>

床前明月光<span>(2)</span>，疑是地上霜⑶。

举头望明月⑷，低头思故乡。

</body>

</html>

```

### 1.2font属性

```

风格>粗细>大小>类型

风格：font-style属性

粗细：font-weight属性

大小：font-size属性

类型：font-family属性

font:风格粗细大小类型（和上面的等价）

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

body{

/* font-style: italic;

font-size: 10px;

font-weight: bold;

font-family: '宋体'; */

font: italic bold 30px"宋体";

}

</style>

</head>

<body>

床前明月光<span>(2)</span>，疑是地上霜⑶。

举头望明月⑷，低头思故乡。

</body>

</html>

```

### 1.3文本属性

```

文本颜色 color:rgba()函数

代码分析：

body{

/* color: #c52e32; */ //颜色

color: rgb(46, 51, 152);//rgb调色

}

</style>

</head>

<body>

床前明月光<span>(2)</span>，疑是地上霜⑶。

举头望明月⑷，低头思故乡。

</body>

</html>

代码分析：rgba（）函数

<!DOCTYPE html>

<head>

<title>Document</title>

body{

/* color: #c52e32;

color: rgb(46, 51, 152); */

color: rgba(100, 100, 100, 0.5)//最后位的参数代表的是字体的透明度

}

</style>

</head>

<body>

床前明月光<span>(2)</span>，疑是地上霜⑶。

举头望明月⑷，低头思故乡。

</body>

</html>

文本对齐 text-align:center/left/right

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

body{

text-align: center;

}

h1{

text-align: center;

}

</style>

</head>

<body>

床前明月光<span>(2)</span>，疑是地上霜⑶。

举头望明月⑷，低头思故乡。

</body>

</html>

文本装饰 text-decoration:

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

h1{

text-decoration: overline;

}

h2{

text-decoration: line-through;

}

h3{

text-decoration: underline;

}

h4{

text-decoration: blink;

}

h5{

text-decoration: none;

}

</style>

</head>

<body>

<h1>JAVA实战</h1>

<h2>CSS盒子</h2>

<h3>python实战</h3>

<h4>c语言程序</h4>

<h5>JAVA该机API</h5>

</body>

</html>

文本阴影 text-shadow:阴影横向偏移量阴影纵向偏移量模糊度颜色（负号代表反方向）

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

div{

font-size: 100px;

text-shadow: 10px 10px 10px blanchedalmond;

}

</style>

</head>

<body>

<div>文本影子的效果</div>

</body>

</html>

垂直对齐（图片和文字）vertical-align

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

img,span{

vertical-align: middle;

}

</style>

</head>

<body>

<p>

</p>

</body>

</html>

```

## 2.伪类超链接

```

标签名：hover

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

a:hover{

text-decoration: none;

}

</style>

</head>

<body>

</body>

</html>

```

## 3.列表属性

```

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

</style>

</head>

<body>

<style>

ul li {

height: 30px;

line-height: 25px;

text-indent: 1em;/*首行文本的缩进*/

}

</style>

<!DOCTYPE html>

<html>

</head>

<body>

<h2 class="title">全部商品分类</h2>

<ul>

</li>

</ul>

</body>

</html>

</body>

</html>

```

## 4.背景样式

```

背景颜色背景图像背景定位

代码分析：

<style>

#nav {

width:230px;

background-color:#D7D7D7;

}

.title {

background-color:#C00;

font-size:18px;

font-weight:bold;

color:#FFF;

text-indent:1em;

line-height:35px;

}

#nav ul li {

height:30px;

line-height:25px;

list-style: none;

}

</style>

<!DOCTYPE html>

<html>

</head>

<body>

<div class="title">全部商品分类</div>

<ul>

</ul>

</div>

</body>

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

</style>

</head>

<body>

<style>

#nav {

width:230px;

background-color:#D7D7D7;

}

.title { //背景颜色背景图像背景定位

background: #C00 url(img/arrow-down.gif) 205px 10px no-repeat;

}

#nav ul li { //背景颜色背景图像背景定位

background: url(img/arrow-right.gif) 170px 2px no-repeat;

}

</style>

<!DOCTYPE html>

<html>

</head>

<body>

<div class="title">全部商品分类</div>

<ul>

</ul>

</div>

</body>

</html>

```

a:link：没有访问超链接时文本样式

a:visited单击访问后超链接的样式

a：hover鼠标悬停在文字上面的样式

a：active表示点击超链接的那一刻的样式

速记：有人给你买lv你就ha大笑

鼠标类型：defult默认光标 puinterc 超链接的指示 wait等待的效果 crossshair呈现十字架

语法：cuisoe：pointer超链接的指针

码农公寓

鼠标类型：defult默认光标 puinterc 超链接的指示 wait等待的效果 crossshair呈现十字架

相关文章