css入门

最新推荐文章于 2022-04-12 15:46:58 发布

chen_328_

最新推荐文章于 2022-04-12 15:46:58 发布

阅读量59

点赞数

本文链接：https://blog.csdn.net/chen_3_28/article/details/119538830

版权

CSS技术

CSS介绍

CSS（层叠样式表单）是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

CSS语法

选择器{键值对}：

选择器：决定受影响的HTML元素标签

键值对：属性和值。（用冒号分开）由花括号包围

多个声明：（多个键值对）需要用分号将每个声明隔开，虽然最后的声明不加，但方便阅读尽量加上。

例如：

font-size:11pt;

margin-left:15px;

}

注：一般每行只描述一个属性

CSS注释：/**/

CSS和HTML结合的方式

第一种

在标签的style属性上设置"key:value value;"，修改标签样式，例如

<div style="border: #ff0c15 1px solid">div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>

缺点：样式多了的话，代码会非常多

代码没有复用性

第二种

在head标签中，使用style标签来定义各种自己需要的CSS样式，格式如下：

xxx {

Key : value value;

}

且color是设置对象文本颜色，无默认值

例：

    <style type="text/css">
        span{
            border: #ef0710 1px solid ;
        }
    </style>

缺点：只能在同一页面内复用代码，不能在多个页面复用

不方便维护，实际的项目中会有成百上千万的页面，要到每个页面维护，过于繁琐

第三种

把css样式写成一个单独的文件，通过link标签引入既可复用

使用HTML的<link rel = "stylesheet" type = "text/css" href = "./stlye.css" />标签导入css样式文件

CSS选择器

标签名选择器

标签名选择器的格式是：

标签名{

属性：值

}

作用：可以决定哪些标签被动的使用样式，例如：

  <style type="text/css">
    div{
      border: #efc807 1px solid ;
      font-size: 30px;
      color: blue;
    }
    span{
      border: #0fef07 5px dashed ;
      font-size: 20px;
      color: yellow;
    }
  </style>

id选择器

id选择器的格式：

#id属性值{

属性：值；

}

作用：可以通过id选择器，选择性的去使用样式，例如：

<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
  <!--
  需求：定义两个div标签
  第一个div标签定义id为id001，根据id属性定义css样式修改字体为蓝色，字体大写30像素，边框为1像素黄色虚线
  第二个div标签定义id为id002，根据id属性定义css样式修改字体为红色，字体大写20像素，边框为5像素蓝色点线
  -->
  <style type="text/css">

    #id001{
        color: blue;
        font-size: 30px;
        border: 1px yellow dashed;
    }
    #id002{
        color: red;
        font-size: 20px;
        border: 5px blue dotted;
    }
  </style>
</head>
<body>
<div id="id001">div1</div>
<div id="id002">div2</div>
</body>

class类选择器

class类选择器的格式是：

.class属性值{

属性：值；

}

作用：class类选择器，可以通过class属性有效的选择性地去使用这个样式，例如：

<head>
    <meta charset="UTF-8">
    <title>class类选择器</title>
  <!--
  需求：
  修改class属性值为class01的span标签，字体为蓝色、30像素。边框为1像素黄色虚线
  修改class属性值为class02的div标签，字体为灰色、26像素。边框为1像素红色点线
  -->

  <style type="text/css">
    .class01{
      color: #525fff;
      font-size: 30px;
      border: 1px yellow dashed;
    }
    .class02{
      color: #6b6c78;
      font-size: 26px;
      border: 1px #ff0000 dotted;
    }
  </style>

</head>
<body>
<span class="class01">span1</span>
<span>span</span>
<div class="class02">div1</div>
<div>div2</div>
</body>

组合选择器

组合选择器的格式是：

选择器1，选择器2，选择器n{

属性：值；

}

作用：让多个选择器共用同个css样式代码，例如：

<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        #id01,.class01{
            color: blue;
            font-size: 20px;
            border: 1px yellow solid;
        }
    </style>
  <!--
  需求：
  修改class="class01"的div标签和id="id01"使用的span标签
  字体为蓝，20像素。边框1像素的黄色实线
  -->
</head>

<body>
<div class="class01">div1</div>
<span id="id01">span1</span>
<span id="id01">span2</span>
<span id="id01">span3</span>
</body>

常用样式

颜色

color:red;

可以直接写颜色名，如上red，

也可以写rgb值和十六进制表示，如rgb(255,0,0) ，#000FF0 。如果是16进制必须加#

宽度

width:19px;

宽度可以写像素值：19px；

也可以写百分值：20%;

高度

height:20px;

高可以写像素值：20px；

也可以写百分值：21%;

背景颜色

background-color:#000FF0

字体样式

color:#000FF0;字体颜色

font-size:20px;字体大写

边框

border:1px red solid;1像素红实线边框

DIV居中

这个块，相对于页面或者附属的（反正不是文本）居中

margin-left:auto;

margin-right:auto;

文字文本居中：

text-align:center;

超链去除下划线

text-decoration:none;

表格细线

table{

border:1px;solid black; /* 设置边框 */

border-collapse:collapse; /* 将边框合并（单元格边框与表格外框） */

}

td,th{

border:1px;solid black; /* 单元格设置边框 */

}

无序列表去掉修饰

ul{

list-stlye:none;

}

chen_328_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css入门

CSS技术CSS介绍CSS（层叠样式表单）是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言CSS语法选择器{键值对}：选择器：决定受影响的HTML元素标签键值对：属性和值。（用冒号分开）由花括号包围多个声明：（多个键值对）需要用分号将每个声明隔开，虽然最后的声明不加，但方便阅读尽量加上。例如：p{ font-size:11pt; margin-left:15px;}注：一般每行只描述一个属性 CSS注释：/**/CSS和HTML结合的方式第一种
复制链接

扫一扫