HTML+CSS学习（二）

最新推荐文章于 2023-02-10 11:25:35 发布

也许~~

最新推荐文章于 2023-02-10 11:25:35 发布

阅读量143

点赞数

本文链接：https://blog.csdn.net/weixin_43690296/article/details/84330664

版权

一、在HTML中嵌入CSS

1.链接到外部的样式表：html在头部用链接到CSS样式文件。

例如：

 <link rel=“stylesheet” href=“style.css” type=“text/css”>

2.内嵌样式表：
用style标记将样式表嵌入在html文件的头部。Style中的type属性默认值text/css，嵌入样式表的作用范围是在本html文件内。
例如：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css">
    <style type="text/css">
        /*选择器  匹配元素的*/
        /*1.基本元素选择器*/
        div{
            width: 100px;
            height: 300px;
            border: 1px solid black;
        }
        span{}
        p{}
        ul{}
        li{}
        /*2.class类名称选择器*/
        .block{
            width: 400px;
            height: 300px;
            background-color: red;
        }
        /*3.id选择器*/
        #b1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        /*4.子父元素选择器*/
        #ulmenu{
            border: 1px solid black;
        }
        #ulmenu>li{
            list-style: none;
            border: 1px solid silver;
        }
        #ulmenu li{
            color: red;
        }
        /*5.属性选择器*/
       /* div[class][id]{
            background-color: black;
        }*/
        div[class="block"][id="bb"]{
            background-color: black;
        }
        #centerBlock{
            height: 300px;
        }
    </style>
</head>
<body>
<!--2.内嵌样式-->
<div>

</div>
<div class="block"></div>
<div class="block"></div>
<div class="block" id="bb"></div>
<div class="block"></div>
<div id="b1"></div>
<ul id="ulmenu">
    <li>1
        <ul>
            <li>2</li>
            <li>2</li>
            <li>2</li>
            <li>2</li>
        </ul>
    </li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
</html>

3.内联样式:将定义的规则作为style标记的属性值。作用范围仅限于此标记范围
例如：

<div style=" width: 200px; height: 300px; border:1px solid black;"></div>

二、相对定位、绝对定位、固定定位

2.1 相对定位 position;relative;

.b1{
            position: relative;   /*元素相对定位之后  可以使用一些样式   z-index  left right top bottom*/
            width: 100px;
            height: 100px;
            background-color: red;
            z-index: 0;
        }

2.2 绝对定位 position:absolutely;

.b1{
            position: relative;   /*元素相对定位之后  可以使用一些样式   z-index  left right top bottom*/
            width: 100px;
            height: 100px;
            background-color: red;
            z-index: 0;
        }

提示：绝对定位与文档流无关，所以它可以覆盖页面上的其它元素，可以通过z-index来控制这些框的堆放次序

2.3固定定位 position:fixed;
三、表单输入元素
3.1按钮（button）

<input name="button1" type="submit" value="提交"/>
<input name="button2" type="reset" value="重置"/>
<input name="button3" type="button" value="普通按钮"/>

3.2文本（text）

<input type="text" value="文本"/>
<input type="password" value="密码"/>
<textarea name="textarea"  cols="30" rows="10"></textarea>多行文本框

3.3单选按钮和复选框

单选按钮
<input type="radio" name="sex" value="male"/>男性
<input type="radio" name="sex" value="male"/>女性
复选框
<input type="checkbox" name="" value=""/>

也许~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS学习（二）

一、在HTML中嵌入CSS1.链接到外部的样式表：html在头部用链接到CSS样式文件。例如： &amp;amp;lt;link rel=“stylesheet” href=“style.css” type=“text/css”&amp;amp;gt;2.内嵌样式表：用style标记将样式表嵌入在html文件的头部。Style中的type属性默认值text/css，嵌入样式表的作用范围是在本html文件内。例如：...
复制链接

扫一扫