CSS渲染之各种炫技

HTML是为了设计基本布局，CSS是为了渲染HTML，而JS是为了实现动态效果。

1.引入CSS的两种方式

<1> 直接在html页面的<head>标签里写入（写在<style>标签里）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test{
            color:red;
        }
    </style>
</head>
<body>

<div class="test">测试代码</div>
</body>
</html>
<2> 导入css文件
先写个xr.css文件（xr是渲染的意思，我自己定义的），内容如下：
.test{
    color:red;
 }

然后在html正文里引入css文件：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="xr.css" rel="stylesheet">
</head>
<body>
<div class="test">测试代码</div>
</body>
</html>

2.怎样写CSS代码来渲染html

<1> .用来渲染class内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test{
            color:red;
        }
        p.test{
            color:blue;
        }

    </style>
</head>
<body>
<div class="test">测试代码</div>
<p class="test">你好</p>
</body>
</html>
就是说，不同的标签都可以定义相同的class，可以通过标签区分，比如div.class、p.class

<2> #id内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #test{
            color:red;

    </style>
</head>
<body>
<div id="test">测试代码</div>
<div id="abc">你好</div>
</body>
</html>

只要，id是唯一标识，不要设置成一样的，其实一样的貌似也不会出错。

下面再介绍一些CSS的知识点：

1、去掉a标签中的下划线
a{
  text-decoration:none;
}

2、悬浮
float:left/right

3、引入图片
background/background-img:url("images/图片.png") --images/图片.png指的是图片路径，根据实际情况写

4、根据外边距设置其中一个div块居中
用margin:0 auto来设置，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #test{
            width:100%;
            height:44px;
            background-color:blue;
        }
        .abc{
            width:1016px;
            height:44px;
            background-color:pink;
            margin:0 auto;
        }
    </style>
</head>
<body>
<div id="test">
    <div class="abc"></div>
</div>

</body>
</html>

5、position定位
在父级标签里设置：
position:relative;
在子级标签里设置（比如相对于父级靠右150px）：
position:absolute;
right:150px;
照着上面这样写就可以实现定位。

好了，就先说这么多吧，其实CSS很简单，遇到了百度就行。重要的不是一定要记住多少标签，而是知道如何百度，能够轻松找到，这才是能耐。
你们发现了吧？道法术器，我基本上都是在给你们传输道的层面，因为这才是万法之根本，可以让你一通百通的东西。

posted @ 2024-09-03 09:17  疯狂Python  阅读(24)  评论(0)    收藏  举报