css

层叠样式表

不是编程语言

告诉浏览器如何指定样式、布局等

三种方式添加css

1.外部样式表(推荐)

css保存在.css文件中

在HTML里使用<limk>引用

2.内部样式表(推荐)

不使用外部css文件

将css放在HTML<style>里

3.内联样式(不推荐)

仅影响一个元素

在HTML元素的style属性中添加

第一种：是直接指向p标签

第二种：是根据class，也就是类去选，这里用.

第三种：是根据id去选择，这里用#号(不推荐) ，必须确保id唯一

新建一个css文件

.box1 {
  color: rgb(241, 6, 6); 
  /* 这是文字颜色 */
  
  /* 这是背景颜色 */

  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: normal;
  /* 字体样式 */
}

.box2{
    width: 80%;
    /* 这是占屏幕的百分之80 */
    margin:auto;
    /* 这是显示的文字水平居中 */
}

color:文字上色

将HTML文件与css文件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    <link rel="stylesheet" href="style.css">
   
    <title>CSS</title>
    <!-- <style>
        h1{
            color: brown;   //还行这种方法
        }
    </style> -->
</head>
<body>
      <!-- <h1 style="color: rgb(99, 42, 165);">hello world</h1> -->
    <!-- 这种不推荐 -->
    <!--lorem10,就会生成10个废话-->
    <div class="box1">
    <h1>hello world</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, laudantium?</p>
</div>

<div class="box2">
    <h1>hello world</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, laudantium?</p>
</div>
</body>
</html>

link标签，href是文件的位置

HTML文件里面要将写到的文字，放到div class里面，这个名字，后面css会根据这个名字来找

上下左右边距

.box2{
    
    color: crimson;

    border: 5px blue solid;

    border-right: 5px red solid;
    border-left: 0px rgb(0, 255, 128) solid;
    border-top: 10px red dotted;
    border-bottom: 5px rgb(12, 11, 11) double;

  margin-top: 200px;
    /* 这个是将顶部往下面移，针对最上面那个 */

    width: 80%;
    /* 这是占屏幕的百分之80 */
    margin:auto;
    /* 这是显示的文字水平居中 */
}

边框样式

字前面加图案

<div class="list">
<ul>
    <li>list 1</li>
    <li>list 2</li>
    <li>list 3</li>
    <li>list 4</li>
</ul>
</div>

.list li{
   list-style-image: url('C:/Users/User/Desktop/1.jpg');
   /* 他喵的，这里路径是/不是\靠 */
}

这里图片如果太大，需要设置像素，一般10像素差不多

posted @ 2022-08-01 08:17 锦书南辞阅读(15) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

锦书南辞

css

css

字前面加图案

公告