前端之CSS

小赵睡不醒：

已于 2023-04-09 18:46:19 修改

阅读量102

点赞数

分类专栏： javaweb 文章标签： css 前端 html

于 2023-04-07 10:15:57 首次发布

本文链接：https://blog.csdn.net/m0_63932157/article/details/130005193

版权

javaweb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
1.在 head 标签中，出现饿了 <style type="text/css"></style>
表示要写css内容
2.div{} 表示对 div 元素进行样式指定
3.width:300px 表示对 div 样式的具体指定，可以有多个
4.如果有多个,使用 ; 分开即可。最后的属性可以没有; 但是建议
 5.在调试css代码时，可以通过修改颜色或大小判断
  -->
    <style type="text/css">
        div{
            whidth:300px;
            height:100px;
            background-color:beige;

        }

    </style>

</head>
<body>
<!--当我们运行页面时，div 会被 div{} 渲染修饰 -->
<div>hello,world</div>
<br/>
<div>hello,beijing</div>
<br/>
<div>hello,shanghai</div>
<br/>
</body>
</html>

css语法

字体颜色和边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
 颜色可以写颜色名 ,比如 green
 也可以写 rgb 值， 比如 rgb(200,200,200)
 或者用十六进制表示值 比如 #708090
 -->
    <style type="text/css">
        div{
            /*color:green;*/
            /*color:rgb(200,200,200);*/
            color:#708090;
        }
    </style>
</head>
<body>
<div>好困啊，想睡觉了，艹</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type="text/css">
    div{
      width: 300px;/*使用具体的值*/
      /*width: 50%;*/ /*使用百分比*/
      height: 100px;
      border:1px solid blue;
    }
  </style>
</head>
<body>
<div>好困啊，想睡觉了，艹</div>
</body>
</html>

背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type="text/css">
    div{
      width: 300px;/*使用具体的值*/
      /*width: 50%;*/ /*使用百分比*/
      height: 100px;
      background-color: green;
    }
  </style>
</head>
<body>
<div>好困啊，想睡觉了，艹</div>
</body>
</html>

字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*
      1.font-size 指定大小，可以按照像素大小
      2.font-weight ：指定是否是粗体
      3.font-family : 指定字体类型
      字体类型需要满足电脑安装了这个字体库
      4.margin-left:auto; margin-right:auto;
      如果设置为auto ，则表示左右居中，自适应
      5.text-align:center 表示文本居中
         */
        div{
            border: 1px solid black;
            width:300px;
            font-size:40px;
            font-weight: bold;
            font-family:新宋体 ;
            margin-left:auto;
            margin-right:auto;
          	text-align:center;
        }
    </style>
</head>
<body>
<div>ACwing</div>

</body>
</html>

超链接去下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接去下划线</title>
  <style type="text/css">
    a{
      text-decoration: none;
    }
  </style>
</head>
<body>
<a href="http://www.baidu.com"> 点击到百度</a>
</body>
</html>

表格细线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type="text/css">
    /*
    设置边框， border:1px solid black
    将边框合并 border-collapse:collapse;
    指定宽度:width
    设置边框: 给 td th 指定即可，  border:1px solid black

    table tr, td 表示组合选择器，使用统一的样式,可以提高复用性
     */


    table,tr,td{
      width:300px;
      border:1px solid black;
      border-collapse:collapse;


    }
  </style>
</head>
<body>
<table>
  <tr>
    <td align="center" colspan="3"> 星期一菜谱</td>
  </tr>
  <tr>
    <td rowspan="2">素菜</td>
    <td>小葱豆腐</td>
    <td>炒白菜</td>
  </tr>
  <tr>
    <td rowspan="2">荤菜</td>
    <td>红烧肉</td>
    <td>烤全羊</td>
  </tr>

</table>

</body>
</html>

无序列表去默认样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表去修饰</title>
  <style type="text/css">
    ul{
      /*
    list-style:none; 表示去掉默认的修饰
       */
      list-style:none;
    }
  </style>
</head>
<body>
<ul>
  <li>三国演义</li>
  <li>红楼梦</li>
  <li>西游记</li>
  <li>水浒传</li>
</ul>

</body>
</html>

css的三种使用方式
1.在标签的 style 属性上设置 css 样式。
说明：代码的复用性很差。
2.在head 标签中，使用 style 标签来定义需要的 css样式。
3.把 css 样式写成单独的 css 文件，再通过 link 标签再引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 1.rel=“stylesheet” 关联 必须要有
     2.href 表示要引入的css文件 ，可以是绝对的路径，也可以是相对的
-->
    <link rel="stylesheet" type="text/css" href="./css/my.css">
    
</head>
<body>
<div>hello,World</div>
<div>Acwing</div>
<div>hello,Beijing</div>
<span>准备去吃饭了</span>
</body>
</html>

css选择器

1.元素选择器

元素选择器
1.最基本的css 选择器，换句话说，文档的元素就是最基本的选择器。
2.css 元素/标签选择器通常是某个 HTML 元素，比如 p,h1,a 等。
3.元素选择器会默认修饰所有的对应元素。

2.ID选择器

1.id选择器可以标有特定 id 的HTML 元素指定特定的样式。

2.Id 选择器以 “#” 来定义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
  <style type="text/css">
    #css1{
      color:gold;
    }
    #css2{
      color:green;
    }
  </style>
    
</head>
<body>
<!--使用 id 选择器
1.要先给要修饰的元素定义一个id
2.id 的值不能重复，是唯一的。
3.在 <style> 中指定id 选择器，要 #id值
-->
<h1 id="css1"> 韩顺平教育</h1>
<p id="css2"> hello world</p>
</body>
</html>

3.class选择器

1.class 类选择器，可以通过class 属性选择去使用这个样式。

2.基本语法：

class 属性值{属性:值;}

修饰部分的标签，指定哪几个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--  使用 class 选择器-->
<!--  1.要在被修饰的元素上，设置 class 属性-->
<!--  2.class 属性的值可以重复-->
<!--  3.需要在 <style><style> 指定类选择器的样式-->
  <style type="text/css">
    .css1{
      color:red;
    }
    .css2{
      color:sandybrown;
    }

  </style>
</head>
<body>

<div class="css1">韩顺平教育</div>
<div class="css1">Acwing</div>
<div class="css2"> hellowrold</div>

</body>
</html>

4.组合选择器

1.让多个选择器共用一个 css 样式代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  样式共用 -->
  <style type="text/css">
    .class01,#id01{
      width:300px;
      height:100px;
      border:2px solid red;
    }
  </style>
</head>
<body>
<div class="class01"> 韩顺平教育</div>
<p id="id01"> hello world</p>
</body>
</html>

选择器优先级说明

行内样式优先级 > id 选择器优先级 > class 选择器的优先级 > 元素选择器的优先级。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  
1.行内样式优先级 > id 选择器优先级 > class 选择器的优先级 > 元素选择器的优先级
-->
  <style type="text/css">
    #id01{
      color: green;
    }
    .class01{
      color: blue;
    }
    div{
      color: sandybrown;
    }
  </style>
</head>
<body>
<h1>选择器的优先级说明</h1>
<div style="color: red" id="id01" class="class01">韩顺平教育</div>
</body>
</html>