CSS基础

最新推荐文章于 2025-05-25 21:45:57 发布

夜夜夜ye

最新推荐文章于 2025-05-25 21:45:57 发布

阅读量363

点赞数 2

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/qq_52830421/article/details/142433598

版权

一.CSS

1.css语法语法构成:由选择器和声明两部分组成,声明由属性和值组成
2.常用样式字体颜色:

  1.英文
  2.16进制#ff7d44
  3.三原色 rgb(1,1,1)*/

3.常用边框

 div{
 /*为div容器调整大小及边框*/
    width:300px;
    height:100px;
    border:1px dashed blue;
    dashed为虚线,如需实线则改为solid
  }

4.背景颜色
background-color:
5.字体样式:

/*指定字体大小*/
    font-size:40px;
    /*指定字体是否为粗体*/
    font-weight:bold;
  /*  指定类型*/
    font-family: 新宋体;

6.div居中

/*两个都设置为auto,表示左右居中*/
    margin-left:auto;
    margin-right:auto;

7.文本居中

text-align:表示文本居中

8.超链接去下划线,表格细线

a{
    text-decoration: none;
  }
  
table{
      border:1px solid black;
      border-collapse:collapse
  /*    border-collapse属性可将细线间的缝隙填充*/
  }

9.无序列表去掉样式


ul{
//该属性表示去掉默认修饰
list-style:none;
}
<ul>
    <li>三国演义</li>
    <li>红楼梦</li>
    <li>西游记</li>
</ul>

10.css使用方式

1.行内使用
<div style = "width:300px;height = 100px">今天是个好日子</div>
2.在head标签中,使用style标签来定义需要的css样式,<style>   </style>
3.使用link标签引入外部的css文件
<link rel = "stylesheet" type = "text/css" href = "./my.css">
href表示文件地址,rel表示relation
推荐使用第三种

11.css选择器
1.元素选择器,即直接选择标签/元素,例如p,h1,a
2.ID选择器,使用id选择器,需要再修饰元素指定id,且id不能重复,使用id选择器时,前面需要加#号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #css1{
      color: blue;
    }
  </style>
</head>
<body>
<h1 id = "css1">hello,world</h1>
</body>
</html>

3.类选择器,通过class属性选择去使用这个样式,在页面里有几个标签的样式要统一时可以使用
使用class选择器,要在被修饰的元素是哪个,设置class属性,class属性的值可以重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .css1{
      width:100px;
      hegiht:100px;
      background-color: red;
    }
    .css2{
      width:100px;
      hegiht:100px;
      background-color: blue;
    }
  </style>
</head>
<body>
<div class = "css1">今天天气好</div>
<h1 class = "css2">天气不哈</h1>
<div class="css2">天气好</div>
</body>
</html>

4.组合选择器,即让多个选择器共用一个css样式,就是前面几个选择器的集合,样式:
选择器1,选择器2,.....{属性:值}
5.选择器优先级:行内样式>ID选择器>class选择器>元素选择器