web前端之css

最新推荐文章于 2023-07-22 17:52:33 发布

BigMasterSun

最新推荐文章于 2023-07-22 17:52:33 发布

阅读量402

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_40406241/article/details/90671338

版权

web前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

css——层叠样式表

css用于修饰html，使得html页面的布局更加好看。

1、css的注释

/*单行注释*/

/*
多行注释
*/

2、语法结构

选择器 {属性:属性值; 属性:属性值; 属性:属性值;}

 p {color: red; font-size: 20px}

3、css的引入方式

css有三种引入方式：

I：在标签内通过style属性引入：

<body>
<p style="color: green">我是一个p标签</p>
</body>

效果：

II：在head内，在style内部直接书写：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {color: red}
    </style>
</head>
<body>
<p>我是一个p标签</p>
</body>

效果：

III：通过link的href引入外部的css文件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="my.css">
</head>
<body>
<p>我是一个p标签</p>
</body>

my.css文件内容：

/*xx功能区css样式开始*/
p {color: blue}
/*xx功能区css样式结束*/

效果：

4、基本选择器

标签通常都必须有的属性
id 用来唯一标识标签
class 标签类属性,可以有多个值
ps:可以把它理解成python面向对象的继承

I：标签选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        span {color: red}
    </style>

</head>
<body>
<span>span</span>
<div>div
    <p>p
        <span>span</span>
    </p>
</div>
<div>div</div>
</body>

上面是要span标签里的内容都变为红色。

效果：

II：id选择器----以#开头书写

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #s1 {color: green}
    </style>
</head>
<body>
<span id="s1">span</span>
<div>div
    <p>p
        <span id="s2">span</span>
    </p>
</div>
<div>div</div>
</body>

上面是让id为s1的标签内的内容显示绿色

效果：

III：类选择器----以(.)开头书写

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {color: green}
    </style>
</head>
<body>
<span id="s1">span</span>
<div class="c1">div
    <p>p
        <span id="s2">span</span>
    </p>
</div>
<div class="c2">div</div>
</body>

上面是让类c1中的内容显示绿色

效果：

IV：通用选择器----*

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {color: green}
    </style>
</head>
<body>
<span id="s1">span</span>
<div class="c1">div
    <p>p
        <span id="s2">span</span>
    </p>
</div>
<div class="c2">div</div>
</body>

使所有的内容都显示绿色，一般不会使用它

效果：

5、组合选择器：

body内代码：

<body>

<span>我是div上面的span</span>
<div>
    <span>我是div里面的第一个span</span>
    <p>我是div里面的第一个p
        <span>我是div里面的第一个p里面的span</span>
    </p>
    <span>我是div里面的第二个span</span>
</div>
<span>我是div下面的第一个span</span>
<span>我是div下面的第二个span</span>

</body>

I：后代选择器

div span{
            color: red;
        }

div内的所有span都显示红色

效果：

II：儿子选择器

div>span{
            color: red;
        }

div内第一级的span显示红色

效果：

III：毗邻选择器：对下不对上

div+span{
            color: red;
        }

div下面毗邻的第一个 span

效果：

IV：弟弟选择器：对下不对上

div~span{
            color: red;
        }

div下面所有的span

效果：

6、属性选择器

body内代码：

<body>

<span xxx="2">span</span>
<p xxx>我只有属性名</p>
<p xxx="1">我有属性名和属性值并且值为1</p>
<p xxx="2">我有属性名和属性值并且值为2</p>

</body>

I：只要有xxx属性名的标签都找到

[xxx]   {
            color: blue;
        }

效果：

II：只要标签有属性名为xxx并且值为1

[xxx='1'] {
            color: blue;
        }

效果：

III：规定p标签内部必须有属性名为xxx并且值为2的标签

p[xxx='2'] {
            color: blue;
        }

效果：

7、分组与嵌套

body内文件

<body>

<div>div</div>
<p>p</p>
<span>span</span>

</body>

I：分组：多个元素样式相同时，可以在多个选择器之间以逗号分隔，统一设置样式

div,p,span{color: blue}

效果：

II：嵌套：

不同的选择器可以共用一个样式
后代选择器与标签组合使用

div的后代里面的p，span一起设置样式

div p,span{color: blue}

效果：

8、伪类选择器

body内代码

<body>

<a href="https://www.baidu.com">百度</a>
<a href="http://www.xiaohuar.com">校花网</a>
<a href="http://www.sogo.com">搜狗</a>
<label for="s1"><input type="text" id="s1"></label>

</body>

针对a标签

        /* 未访问的链接 */
        a:link {
            color: red;
        }
        /*鼠标悬停到链接上*/
        a:hover {
            color: yellow;
        }
        /*点击链接时*/
        a:active {
            color: black;
        }
        /*访问过的链接*/
        a:visited {
            color: green;
        }
        /*点击时背景*/
        input:focus {
            background-color: pink;
        }

百度访问过，显示绿色

鼠标悬停在校花网，显示黄色

鼠标点击校花网，显示黑色

没有访问过的链接，显示红色

点击input框输入时，

9、选择器优先级

行内样式 > id选择器> 类选择器 > 标签选择器

10、伪元素选择器

body内代码：

<body>
<p>秦时明月汉时关</p>
<p>万里长征人未还</p>
<p>但使龙城飞将在</p>
<p>不教胡马度阴山</p>
</body>

I：first-letter----给首字符设置特殊样式

p:first-letter {
            color: red;
            font-size: 48px;
        }

效果：

II：before----在每个元素之前插入内容

p:before {
            content: '***';
            color: green;
        }

效果：

III：after----在每行元素后面追加

p:after {
            content: '!';
            color: deeppink;
            font-size: 48px;
        }

效果：

11、样式修改

body内代码

<div>div</div>
<div>div</div>
<p>十年生死两茫茫，不思量，自难忘，千里孤坟，无处话凄凉。</p>

原效果：

I：调整宽和高（块级标签才能设置）

div {
            width: 400px;
            height: 100px;
            background-color: pink;
        }

效果：

II：调整字体：

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

III：字体大小

p {
            font-size: 36px;
            font-weight: lighter;
        }

font-size 是调整大小

font-weight:lighter 是把字体变细

font-weight:bold 粗体

font-weight:bolder 更粗

font-weight:normal 默认值，标准粗细

效果：

12、文本颜色

body内代码

<p>自是人生长恨水长东</p>

以数字确定颜色

p {
            color: #FF6700;
        }

还有其他三种颜色的定义方法：

p {
            /*color: red;*/
            /*color: rgb(255,0,0);*/
            /*color: #FF6700;*/
            color: rgba(0,0,255,0.2);
        }

rgba()的最后一个参数指定的是透明度，指定0.2的效果如下：

13、文本属性

text-align: center; /* 文本居中显示*/

text-align: right; /*右对齐*/

text-align: left; /*左对齐*/

text-align: justify /*两端对齐*/

text-decoration: line-through; /*删除线*/

效果：

text-decoration: underline; /*下划线*/
text-decoration: overline; /*文字上部划线*/

text-decoration: none; /*定义标准的文本*/

</style>       
 a {
            text-decoration: none;
        }
</style>
</head>
<body>
<a href="http://www.xiaohuar.com">笑话网</a>
</body>

如上给a标签加了标准文本模式，那么网页链接的下划线就会取消：

text-indent: 32px /*首行缩进32px*/

p {
  text-indent: 32px;
}

14、背景属性

background-color: green; /*设置背景颜色*/

background-image: url("1.png"); /*设置背景图片*/

background-repeat: no-repeat; /* 背景重复*/

/*
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/

background-position: center; /*背景图片的位置*/

background-position: left top;

background-position: 200px 200px;

上面写了可以简写：

background: no-repeat center url("1.png") blue ; /*里面顺序不是固定的*/

背景图片示例：

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。通过background-attachment：fixed 这个属性，可以声明图像相对于可视区是固定的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
        .c1 {
            height: 400px;
            background-color: tomato;
        }
        .box {
            height: 400px;
            background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");
            background-attachment: fixed;
        }
        .c2 {
            height: 400px;
            background-color: red;
        }
        .c3 {
            height: 400px;
            background-color: fuchsia;
        }
    </style>
</head>
<body>

<div class="c1"></div>
<div class="box"></div>
<div class="c2"></div>
<div class="c3"></div>

</body>
</html>

15、边框

div {
            border-width: 3px;
            border-style: dashed;
            border-color: tomato;
        }

效果：

上述可以简写为： border: 3px solid red;

边框样式：

dotted：点状虚线边框

dashed：矩形虚线边框

solid：实线边框

none：无边框

16、画圆

border-radius可以实现圆形边框的效果，将其设置为长或高的一半即可得到一个圆形。

 div {
            width: 400px;
            height: 400px;
            background-color: red;
            border: 3px solid black;
            border-radius: 50%;
        }

效果：

17、display属性

body内容：

<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>

I：隐藏 div，并且不占空间，不会影响布局

div {
            display: none;
        }

效果：

II： inline将块儿级标签变成行内标签

div {
            display: inline;
        }

效果：

III：block将行内标签变为块级标签

span   {
            display: block;
        }

效果：

IV：inline-block让选择的标签既具有行内标签特点又有块儿级标签的特点，即可以调节长宽。

span {
            display: inline-block;
            height: 400px;
            width: 400px;
            background-color: red;
            border: 3px solid black;
        }

效果：

BigMasterSun

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
web前端之css

css——层叠样式表css用于修饰html，使得html页面的布局更加好看。1、css的注释/*单行注释*//*多行注释*/2、语法结构选择器 {属性:属性值; 属性:属性值; 属性:属性值;} p {color: red; font-size: 20px}3、css的引入方式css有三种引入方式：I：在标签内通过style属性引入：&lt...
复制链接

扫一扫