CSS入门:基本语法、选择器用法

1. css的概念及其作用

css全称为(Cascading Style Sheets)翻译过来就是层叠样式表。 作用:主要作用就是设置网页的文字(大小,颜色,字体,对齐等等)图片和板式布局等等,其实说的简单点了就是给页面化妆的。

基本语法

选择器 {
    属性1: 值1;
    属性2: 值2;   
    ...
}

CSS初体验

修改字体的颜色和字体大小,通过标签div选择器设置。

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

    <style>
        div {
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>

<div>CSS入门初体验</div>

</body>
</html>

构建css的运行环境是通过style标签,该标签可以写在任意位置,但通常写在head标签里面。而在style标签里选中对应的元素,如div,div标签后面跟一个空格,然后在大括号中以健值对的方式写属性和属性值。

2. 字体属性

2.1 设置字体的大小

font-size 设置字体的大小
取值:font-size: 30px;
注意:在css大多数数值都需要添加单位,px是一个单位像素,代表屏幕的像素

通过标签选择器设置字体的大小

<head>
    <style>
        div {
            font-size: 30px;
        }
    </style>
</head>
<body>

<div>设置字体的大小</div>
</body>

2.2 设置字体的粗细

font-weight 设置字体的粗细
取值:normal(普通字体)、bold(加粗字体)、100-900

注意:用数字设置的时候,只有400和700会产生变化,是因为字体在初始设计的时候就没有设置太多的粗细标准,一般就是两种,默认的和加粗的,所以在实际工作中,用的最多的就是normal(400) bold(700)

通过标签选择器设置字体的粗细

<head>
    <style>
        div {
            font-weight: bold;
        }
    </style>
</head>

<body>
<div>设置字体的粗细</div>
</body>

2.3 设置字体的风格

font-style 设置字体的风格(样式)
取值:normal 默认,显示标准字体样式
italic 字体斜体

通过标签选择器设置字体的风格(样式)

<head>
    <style>
        div {
            font-style: italic;
        }
    </style>
</head>

<body>
<div>设置字体的风格(样式)</div>
</body>

2.4 设置不同类型的字体

font-family 设置不同类型的字体
取值:宋体、微软雅黑、黑体等

注意:

  • 不推荐使用一些冷门字体,因为一些冷门字体很多电脑里面默认没有安装,这个时候就会显示不出来。所以实际工作中,默认都是一些主流字体 如宋体 微软雅黑 等
  • 字体可以写多组,中间用逗号隔开;如:font-family: '微软雅黑', Arial;
  • 字体名称中如果有空格 # $ 这种特殊字符的时候需要添加上引号,中文字体也需要添加引号。了解:http://code.ciaoca.com/style/...

2.5 font简写

font: font-style  font-weight  font-size/line-height  font-family;

不建议修改顺序,并且不需要设置的属性可以不写,但是font-size和font-family必须指定,否则将不起作用

font简写设置字体

<head>
    <style>
        div {
            font: italic bold 20px/1 '宋体';
        }
    </style>
</head>

<body>
<div>font的简写</div>
</body>

3 选择器

想要操作任何一个标签,那么首先需要做的事情就是选中对应的标签,而这个就是选择器的作用

3.1 标签选择器

标签名 {
     属性1: 值1;
     属性2: 值2;
     ...
}

特点:会将页面上所有符合的标签都选择上,但是不能实现差异化选择。

使用标签选择器,如示例中的div标签,所有的div标签都会应用上css样式。

<head>
    <style>
        div {
            color: pink;
            font-size: 20px;
            font-weight: normal;
            font-style: italic;
        }
    </style>
</head>

<body>
<div>标签选择器</div>
<div>标签选择器</div>
</body>

3.2 类名选择器

  1. 声明类名选择器: 声明自定义类名 .自定义类名 {属性1:值1;属性2: 值2;}
  2. 调用类名选择器: 给对应的元素添加class类名属性 class="自定义的类名"
<head>
    <style>
        /* 声明类名选择器 */
        .box {
            font-size: 20px;
        }
    </style>
</head>

<body>
<!-- 调用类名选择器 -->
<div class="box">类选择器</div>
</body>

特点:可以给相同标签的元素定义不同的样式,在实际工作中用的最多

<head>
    <style>
       /* 声明两个类名选择器 */
        .box1 {
            font-size: 20px;
        }

        .box2 {
            color: red;
        }
    </style>
</head>

<body>
<!-- 两个相同的标签定义不同的样式 -->
<div class="box1">类选择器</div>
<div class="box2">类选择器</div>
</body>

3.3 多类名选择器

需求:两个相同的标签,有一些共同的css样式 但是也有一些差异化的css样式,怎么实现呢? 如:字体的颜色相同,但字体的大小不一样

<head>
    <style>
        .red {
            color: red;
        }

        .fz-20 {
            font-size: 20px;
        }

        .fz-25 {
            font-size: 25px;
        }

    </style>
</head>

<body>
<!-- 多个类名使用 空格 隔开 -->
<div class="red fz-20">类选择器</div>
<div class="red fz-25">类选择器</div>
</body>

一个元素可以拥有多个类名,类名和类名之间用空格隔开,多类名选择器可以让我们解决更复杂的一些需求。

3.4 id选择器

id选择器的使用方式和类选择器基本一致:

  • 声明id方式: #自定义id名字 {属性1:值1;属性2:值2;}
  • 调用id方式: 给对应的元素添加属性 id="自定义id"
<head>
    <style>
       /* 声明id选择器,语法: #自定义id名字 */
        #box {
            color: red;
        }

    </style>
</head>

<body>
<!-- 调用id选择器:通过属性id设置-->
<div id="box">id选择器</div>
</body>

特点:id选择器一般配合后期的js使用较多,效果和类选择器一样,只不过是类选择器可以被多个元素调用,但是id选择器只能被一个元素调用 在同一个页面中,不能出现两个id值相同的元素

3.5 通配符选择器

* {
    属性1: 值1;
    属性2:值2;
}

特点:选中任何元素,后期用于页面初始化。

3.6 伪类选择器

伪类选择器可以理解为选择的元素的一种状态,并不是如之前直接选中元素就完事了。 如:a标签的伪类选择器

a:link   没有被访问的时候的状态
a:visited  访问之后的状态    
a:hover        鼠标移动上去之后的状态
a:active    鼠标按下的状态

伪类选择器在实际工作中,不会写这么多,意义不大,推荐简写的方式完成

a {}
a:hover {} 鼠标移动上去之后的状态

4 文字的对齐、缩进、下划线

4.1 水平对齐

通过text-align属性设置,如:text-align:值; 取值:left 左对齐方式 right 右对齐方式 center 居中对齐方式

注意:该属性控制的是标签 “内部的文字” 水平居中

<head>
    <style>
        .box {
            text-align: right;
        }
    </style>
</head>

<body>
<div class="box">文字水平对齐</div>
</body>

4.2 首行缩进

通过text-indent属性设置,如:text-indent:值; 取值可以是像素,也可以是em 推荐写法:text-indent:2em;

<head>
    <style>
        .box {
            width: 100px; /* 设置宽度为100px,为了演示效果 */
            text-indent: 2em;
        }

    </style>
</head>

<body>
<div class="box">首行缩进, 首行缩进, 首行缩进</div>
</body>

4.3 字体下划线和删除线

通过text-decoration属性设置,如:text-decoration:值; 取值:underline 下划线

line-through 删除线,贯穿线 none 去掉多余的样式

<head>
    <style>
        .box {
            text-decoration: underline;
        }
    </style>
</head>

<body>
<div class="box">字体的下划线</div>
</body>

5 行高

行高控制的是文字与文字之间的上下距离 (行距)

line-height:值;
  1. 值的取值是像素,也可以是倍数,如:line-height:1.5;
  2. 如果将标签的高度和行高设置成一样,那么这个标签里面的文字可以在这个标签里面垂直居中
  3. 与text-align: center;结合使用可以让单行文字在标签内部水平垂直居中
<head>
    <style>
        div {
            width: 250px;
            height: 250px;
            background-color: pink;
            line-height: 250px;
            text-align: center;
            /* 让单行文字在盒子里水平垂直居中,
              text-align: center;
              line-height值设置为标签高度即可
           */
        }
    </style>
</head>

<body>
<div>行高,设置水平垂直居中</div>
</body>

6 其它注意事项

1、 颜色属性 颜色属性的取值可以是:

  • 十六进制(如:#ff0000)
  • rgb(red, green, blue)
  • rgba(red, green, blue, alpha)
background-color: rgb(256, 0, 0);

2、css的注释 css的注释与html的注释不一样

<!-- html的注释 -->
/* css的注释 */
原文链接:segmentfault.com

上一篇:CSS - position 定位_046
下一篇:重新认识prettier及如何工程化

相关推荐

  • 🔥 从最近流行的一幅 CSS 风景画中学习 2 个知识点

    最近 CodePen 流行的一张用纯 CSS 绘制的风景画令人印象深刻: (/public/upload/d250206ad61c150f0fbec8efcd474c2a) 天空的眩光,睡眠反...

    3 个月前
  • 💫 CSS 幻术 | 抗锯齿

    前言 传统网页的呈现是基于像素单位的,所以图片不能和 SVG 一样进行任意尺寸缩放后还保持边缘平整。也就是说,放大像素逻辑的图片,必然导致可视质量下降(信息失真)。

    1 个月前
  • 💖CSS + JS 送学妹满屏幕小爱心

    故事开始 午饭时间,暗恋已久的学妹拉着我的衣袖:“学长学长,你能不能让这些爱心变成五颜六色的吗~”。 我在旁边笑开了花~~~ image.png(/public/upload/04aaa24e...

    2 个月前
  • 黑魔法之 CSS Entry

    大家都知道 webpack 的 Entry 都是 js,如果想输出 css 文件只能在 js 文件里导入 css,所以很多人都会想要是 entry 也可以是 css 那多好,这样就可以任意输出 cs...

    2 年前
  • 鸡啄米:C++编程入门系列之前言

    从今天开始将给大家讲解一些C编程入门的知识,对于也是个温习巩固的过程。将会用深入浅出的方式,尽量用最简单的语言让读者学会C语言,并爱上这门语言。         本前言讲述的是编程语言的发展过程、面...

    3 个月前
  • 高级选择器解析

    高级选择器解析 一、什么是伪类? 注意!:状态类写法分两种,比如 li:hover 表示选择li本体,li:hover&gt;a表示选择li下面的a元素,状态类选择器只能向下或者向兄弟元素,...

    22 天前
  • 高度等于动态宽度(CSS流体布局)[复制品]

    webtikiThomas Norman(https://stackoverflow.com/users/1811992/webtiki)提出了一个问题:Height equal to dynamic...

    2 年前
  • 面试题CSS盒子模型,左右固定宽度,中间自适应的五种死法

    面试题目 假设高度已知,请写出三栏布局,左右300px,中间自适应 图片描述(https://img.javascriptcn.com/6083fb026ec5a5c4546554281a8d5e...

    2 年前
  • 面试必备! CSS知识点总结

    一、 元素水平垂直居中的方法 水平居中 行内元素:textalign:center 已知元素的宽度 设置margin:0 auto 元素的宽度不确定 flex 布局 justifyco...

    10 天前
  • 面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)

    题目:谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 1. 基本概念:标准模型 IE模型(区别) 2. CSS如何设置这两种模型 3. JS如何设置获取盒子模型对应的宽和高 4....

    2 年前

官方社区

扫码加入 JavaScript 社区