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

2019-11-22 admin

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的注释 */

[转载]原文链接:https://segmentfault.com/a/1190000021081184

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-79636.html

文章标题:CSS入门:基本语法、选择器用法

相关文章
element-ui中el-tree树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)
在element-ui的el-tree树形控件中默认获取选取当前选中id的方法是this.$refs.tree.getCheckedKeys(); 但是如果子节点不是全部选中的话,父节点算不选中。 由于我们一般想要的是就算只选中一个直接点父...
2018-12-12
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到...
2015-11-13
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
element动态表单验证prop用法
基于Vue的Element.js的Form组件中,提供了一个动态增减表单的验证逻辑,这在项目中的提供了很大帮助。 但在实际写代码过程中,会遇到很多的坑,特别是动态添加验证规则时,prop属性不知道怎么用。 1、el-form标签的model...
2018-06-27
javascript教程:关于if简写语句优化的方法
UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法。尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作。也许有人认为if语句就那么简单,能优化...
2015-11-12
面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)
题目:谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 基本概念:标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 1...
2018-06-09
回到顶部