CSS基础

最新推荐文章于 2025-01-05 12:37:06 发布

原创最新推荐文章于 2025-01-05 12:37:06 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

CSS基础语法

1. selector{

Property：value

}

创建一个css样式：mycss.css

h1{
    color: red;
}

使用这个样式,创建一个html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="mycss.css" type="text/css" rel="stylesheet"> <!--引入css文件，其中rel是规定引用的外部文件-->
</head>
<body>
    <h1>
        应用了样式表
    </h1>
</body>
</html>

用link标签来引入css样式

CSS高级语法

1. 选择器分组：

h1,h2,h3,h4,h5,h6{color:red;}

2. 继承

body{color:green;}

body内样式变化的前提是没有被定义样式的部分

h1,a,h2{
    color: red;font-size: 50px;
}
body{
    color: aqua;
}

CSS派生选择器

1. 派生选择器：

通过依据元素在其位置的上下文关系来定义样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="mycss.css" type="text/css" rel="stylesheet"> <!--引入css文件，其中rel是规定引用的外部文件-->
</head>
<body>
    <p><strong>hello css</strong></p>
    <ul>
        <li><strong>li标签</strong></li>
    </ul>
</body>
</html>

想要p标签中的strong标签不引入样式

而li标签中的strong标签引入样式

则在css文件中：

li strong{
    color: red;
}

结果：

已经被定义好的效果，不会被覆盖，没有被指定的，将会被覆盖

CSSid选择器

1. id选择器：

Id选择器可以为标有id的HTML元素指定特定的样式

id选择器以”#”来定义

使用方式：html文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="mycss.css" type="text/css" rel="stylesheet"> <!--引入css文件，其中rel是规定引用的外部文件-->
</head>
<body>
    <p id="pid">hello css</p>

</body>
</html>

Css文件中：

#pid{
    color: coral;
}

2. id选择器和派生选择器：

目前比较常用的方式是id选择器常常用于建立派生选择器

用法：

<p id="pid">hello css<a href="http://www.baidu.com">百度</a></p>

想将p标签里面的a标签弄上样式，则css文件中：

#pid a{
    color: coral;
}

Css类选择器

1. 类选择器

类选择器以一个点显示

2. class也可以用作派生选择器

Html文件中

<body>
    <p class="pclass">这是一个class效果</p>
    <div class="divclass">这是一个div效果</div>
</body>

Css文件中

.pclass{
    color: coral ;
}
.divclass{
    color: red;
}

Css属性选择器

1. 属性选择器：

对带有指定属性的HTML元素设置样式

2. 属性和值选择器：

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        [title]{
            color: blue;
        }/*属性选择器*/
        [title=te]{
            color: red;
        }/*属性和值选择器*/
    </style>
</head>
<body>
    <p title="t">属性选择器</p>
    <p title="te">属性和值选择器</p>
</body>
</html>

效果：

CSS样式-背景

Css背景

1. 背景：

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

属性：

Background-attachment:背景图像是否固定或者随着页面的其余部分滚动

Background-color：设置元素的背景颜色

Background-image：把图片设置为背景

Background-position：设置背景图片的起始位置

Background-repeat：设置背景图片是否及如何重复

Background-size：规定图片的尺寸

Background-origin：规定背景图片的定位区域

Background-clip：规定背景的绘制区域

例子：

设置背景颜色Background-color

Html文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>测试一下背景是否可以继承</p>
</body>
</html>

Css文件中：

body{
    background-color: aquamarine;
}
p{
    width: 150px;
    padding: 10px; /*内边距*/
    background-color: coral;
}

效果：

Background-image设置背景图片，要有一个url来引入背景：

body{
    background-image: url("pic.png");
}

给标签添加背景图片：

p{
    width: 200px;
    background-image: url("pic.png");
}

效果：