样式初识-基本样式介绍

Posted 平凡执着

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了样式初识-基本样式介绍相关的知识,希望对你有一定的参考价值。

1 CSS介绍

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构:

 

2 选择器

2.1 id选择器

下面的id选择器样式,写在head的style内,如下所示

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            background-color: gray;
            height: 45px;
        }
    </style>
</head>

2.2 class选择器

<style>
    .c_top{
        background-color: gray;
        height: 45px;
    }
</style>

2.3 标签选择器

所有的div标签,都设置了下面的样式

<style>
    div{
        height: 35px;
        background-color: gray;
    }
</style>

2.4 层级选择器

层级选择器,也叫关联选择器,中间用空格间隔,如下所示:

<style>
    div a{
        height: 35px;
        background-color: gray;
    }
</style>

2.5 组合选择器

组合选择器,中间用逗号间隔,如下所示:

<style>
    #i1,#i2,#i3{
        height: 35px;
        background-color: gray;
    }
</style>

2.6 属性选择器

属性选择器,对选择到的标签再通过属性进行一次筛选,如下所示:

<style>
    input[type="text"]{width:200px;height: 50px;}
</style>

2.7 优先级

样式的优先级,标签上style优先,然后按照编写顺序,采用就近原则。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            color: white;
        }
        .c2{
            font-size: 18px;
            color: black;
        }
    </style>
</head>
<body>
    <div class="c1 c2" style="color:pink;">样式的优先级</div>
</body>

3 边框

边框,主要是border,主要有宽度、样式、颜色(border: 20px dotted red;)

如下所示:

<div style="border: 20px dotted red;">样式边框</div>

4 其他常用样式

height                         高度 百分比

width                           宽度 像素,百分比

text-align          水平方向设置

line-height                 垂直方向根据标签高度

color                            字体颜色

font-size            字体大小

font-weight               字体加粗

<div style="height: 48px;
        width:80%;
        border: 1px solid red;
        font-size: 16px;
        text-align: center;
        line-height: 48px;
        font-weight: bold;">
    显示的内容
</div>

5 float浮动

float,为了让标签浮动起来,块级标签也可以堆叠

<div style="clear: both;"></div>
<div style="width: 20%;float: left">1</div>
<div style="width: 20%;float: left">2</div>

6 display

display: none; -- 让标签消失

display: inline;

display: block;

display: inline-block;

     具有inline,默认自己有多少占多少

     具有block,可以设置无法设置高度,宽度,padding  margin

行内标签:无法设置高度,宽度,padding  margin

块级标签:设置高度,宽度,padding  margin

块级标签与内联标签,通过display进行转换

<div style="display: inline;">显示内容</div>
<span style="display: block;">显示内容</span>

7 边距

设置边距,通过margin、padding进行设置,其中:

padding 内边距

margin  外边距

<div style="width: 980px;margin: 0 auto;">
    <div style="float: left;">收藏本站</div>
    <div style="float: right;">
        <a>登录</a>
        <a>注册</a>
    </div>
    <div style="clear: both"></div>
</div>

 

以上是关于样式初识-基本样式介绍的主要内容,如果未能解决你的问题,请参考以下文章

css初识

css基本语法简单介绍

day50 初识JavaScript

14 vue的data函数中对象和数组的方式绑定模板样式

初识jQuery

微搭低代码样式开发-盒模型介绍