前端入门--css

最新推荐文章于 2024-09-28 15:35:33 发布

阶前

最新推荐文章于 2024-09-28 15:35:33 发布

阅读量116

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/wjx199112/article/details/120805912

版权

本文介绍了div和span在HTML布局中的作用，div用于创建块级元素，span用于内联元素。文章详细阐述了如何通过CSS设置边框、颜色、文字大小等属性，并探讨了在HTML文档中通过标签内样式、外部样式表引用等方式应用CSS。同时，提到了选择器的使用，包括标签选择器、类选择器和ID选择器。最后，给出了一个包含常见CSS样式的实例。

摘要由CSDN通过智能技术生成

div和span的作用:控制文字的布局，div默认文字独占一行，而span默认文字有多长占多长使用格式:需求：分别定义两个div，span标签，分别修改每个dv标签的样式：边框1个像素，实线，红色

1.通过标签中定义属性

<div style="border:red dashed 10px">我是天下第一</div>
style中也可以写多个属性，用分号分割就行
<div style="border:red dashed 10px；background-color:red;">我是天下第一</div>

==这里要注意，border中的颜色是指框的颜色，而如果想改变框内文字颜色直接加上color：red（或者别的）即可。两个颜色需要区分开。
== 第一种结合方法也有缺点：标签多，样式多，代码庞大，复用性太差。

2.同一个页面中引用
同一个页面中引用的话，就是在head标签中放style标签，在style标签中，用对应选择器来进行针对性定义

在这里插入图片描述

这里有几点要注意style中 type="text/css"是固定写法，style里面前面是选择器{格式}也是固定格式

3.不同文件中引用
其实和同一页面引入css是一样的意思，只是把css独立成一个单独的文件了
步骤就是，利用link来把css引入到head中，Link有三个属性，rel含义是关联样式表，type是text/css，href就是css所在路径
在这里插入图片描述

在这里插入图片描述

4.选择器
（1）标签选择器，比如div{},span{}
(2)class选择器，比如.class01{}
(3)id选择器，比如#id001{}
(4)组合选择器，比如div.class01{}
.class,#id001{}

5.css属性值

border边框，主要涉及到的三个值，宽度，颜色，样式

border:1px blue solid

颜色 color

color:blue;

文字大小 font-size

font-size: 30px;

比较全的如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用样式</title>
<style type="text/css">
    div{
        color: red;/*字体颜色*/
        border: 1px yellow solid;/*边框样式*/
        width: 300px;/*边框宽度*/
        height:100px;/*边框高度*/
        background-color: green;/*边框内部背景颜色*/
        font-size: 20px;/*边框内部文字尺寸*/
     /*div居中是指块相对于页面而非文字*/
        margin-left: auto;/*边框居左*/
        margin-right: auto;/*边框居右*//*又居左右居右相当于margin-center: auto;(居中)*/
        text-align: center;  /*文本居中*/
    }
    /*超链接去下划线*/
    a{
        text-decoration: none;
    }
    /*表格细线*/
    table{
        border: 1px red solid;/*表格外边框*/
        border-collapse: collapse;/*表格外边框和单元格合并合并*/
    }
    td{
        border: 1px red solid;/*表格单元格*/
    }
    ul{
        list-style: none;
    }
</style>
</head>
<body>
<ul>
    <li>111111</li>
    <li>111111</li>
    <li>111111</li>
    <li>111111</li>
</ul>
<table>
    <tr> 
        <td>1.1</td>
        <td>1.2</td>
    </tr>
</table>
    <div>我是div标签</div>
    <a href="http://www.baidu.com"target="_blank" >百度</a>
</body>
</html>

参考链接：
https://mp.weixin.qq.com/s?__biz=MzU0NTI3NzAyOA==&mid=2247485677&idx=1&sn=39362abaee0175bf3f37e27bbc32417a&chksm=fb6e1de6cc1994f0a502458a5224402bd5fd10c3f510bf85d18918012b16f8126e2a18cf36d0&scene=178&cur_album_id=2038030519984013319#rd.