devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

css基础篇 01 语法规范 基本选择器 字体属性 文本属性 样式表_使用属性选择器设定文本输入框的样式的正确语法

作者：我家自动化 | 2024-05-06 10:50:17

赞

踩

使用属性选择器设定文本输入框的样式的正确语法

语法规范

样式都写在<style>里，<style>一般写到<head>上方

样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外

属性值前面，冒号后面，保留一个空格

选择器（标签）和大括号中间保留空格

基本选择器

标签选择器

用法

标签名 {样式属性}

例子
h3 {
    color: pink;
    font-size: 20px;  
}

  • 1
  • 2
  • 3
  • 4

类选择器

用法

.类名 {样式属性}

补充

一个标签可以有不止一个类

例子
.class_selector {
	color: red;
}

  • 1
  • 2
  • 3

id选择器

用法

#id {样式属性}

例子
#multiple_class_selector03 {
	font-weight: 1000;
}

  • 1
  • 2
  • 3

通配符选择器

用法

*{样式属性}

(*选择所有标签)

例子
* {
    font-style: italic;
}

  • 1
  • 2
  • 3

字体属性

字体大小font-size

谷歌浏览器默认字体大小是16px

由于不同浏览器打开的默认字体大小不同，所以建议人为自己设置

可以给body设置整个页面的文字的大小

例子
#div01 {
    font-size: 20px;            
}

  • 1
  • 2
  • 3

字体粗细font-weight

实际开发时，更推荐用数字来表示粗细

属性值
normal

普通粗细

bold

加粗

数字

400 等同于 normal，而 700 等同于 bold，由细到粗的字体粗细

例子
#div04{
    font-weight: normal; 
}
#div05{
    font-weight: bold; 
}
#div06{
    font-weight: 100; 
}
#div07{
    font-weight: 500; 
}
#div08{
    font-weight: 1000; 
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

字体样式font-style

属性值
normal

普通字体样式

italic

斜体字体样式

例子
#div09 {
    font-style: normal;
}
#div10 {
    font-style: italic;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

字体的综合写法font:

用法

能有效的减少代码量，简化代码

选择器 {
    font:
    [font-style]
    [font-variant]
    [font-weight]
    font-size[/line-height]
    font-family;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
例子
#div11 {
    font: 
        italic
        300
        30px
        normal;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

文本属性

文本颜色color

表示方法分为三种，分别是：

  • 预定义的颜色值 e.g.: blue
  • 十六进制 e.g.: #0000ff(最常用)
  • RGB代码 e.g.: rgb(0, 0, 255)
例子
#div01 {
    color: #0000ff;
}

  • 1
  • 2
  • 3

文本对齐text-align

文本的位置对齐分布

属性值
left

向左靠拢

right

向右靠拢

center

水平居中

例子
#div02 {
    text-align: left;
}
#div03 {
    text-align: right;
}
#div04 {
    text-align: center;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

修饰文本text-decoration

属性值
none

默认文本，没有修饰

underline

下划线

overline

上划线

line-through

删除线

例子
#div05 {
    text-decoration: none;
}
#div06 {
    text-decoration:underline;
}
#div07 {
    text-decoration:overline;
}
#div08 {
    text-decoration:line-through;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

文本缩进text-indent

文本前的空档

补充

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小

例子
#div09 {
    text-indent: 20px;
}
#div10 {
    text-indent: 2em;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

行间距（行高line-height）

行高的文本分为三个部分: 上间距 文本高度 下间距

行间距=上间距+下间距

行高=行间距+文本高度

例子
.line_height_div {
    line-height: 100px;
}

  • 1
  • 2
  • 3

样式表

行内样式表

直接写在html中的所作用的标签里面的样式

例子
<div style="color:blue">行内样式表</div>

  • 1

内部样式表

写在html中的<style>中的样式

例子
<head>
    <style>
        #div01 {
            color: blue;
        }
    </style>
</head>
<body>
	<div id="div01">内部样式表</div>
</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

外部样式表

写在css中的样式

例子
<head>
    <link rel="stylesheet" href="./外部样式表.css">
</head>
<body>
	<div id="div02">外部样式表</div>
</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

外部样式表.css

#div02 {
    color: blue;
}

  • 1
  • 2
  • 3
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/543841
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号