专栏首页算法与编程之美HTML|css选择器模型

HTML|css选择器模型

问题描述

我们在做前端网页的时候需要简单的布局形式使网页变得美观好看。一些尺寸,颜色,背景等形式都可以通过CSS选择器模型来解决。往往布局网页形式的方法很多,但CSS选择器模型比较清晰方便而且效率高。怎样才能做一个盒模型呢?

解决方案

选择器模型就是将一些形式对象装在一个CSS模型中,我们在使用这些对象时就可以直接通过写模型的名称就可以将其带入进网页改变其格式。对特定的元素的样式进行定义。要清楚有几种选择器:CSS派生选择器,CSSid选择器,CSS类选择器,属性选择器。下面我主要对id和类两种选择器进行描述。

id选择器:①id选择器可以为标有特定id的HTML元素指定特定的样 式。

②Id选择器以“#”来定义

图3.1

首先在css文件中新建一个文档,在里面写上你要的形式。

a.“#”为定义

b.“#”后面的为名称

c.所定义的样式要用{}

图3.2

图3.3

图3.4

d.在你所需要使用样式的地方插入id=“名称(尽量英文)”

图3.5

图3.6

类选择器:以一个点号来显示

用点号来定义

后加名称

用{}来写样式

图3.7

在你所需要使用样式的地方插入class=“名称(尽量英文)”

图3.8

还有另外一种简单的方法就是直接使用<style>

图3.9

结语

掌握这些选择器的格式,有很多注意事项。格式不能写错不然运行不出来,命名尽量不要用中文或数字,标签该对齐的要对齐。CSS很方便快捷不用重复去写代码,比较有结构性。深入学习CSS可以对前端网页的制作有很大的帮助。

END

实习编辑 | 王文星

责 编 | 江汪霖

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:江汪霖

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 深入理解遗传算法(一)

    已知N元一次方程y = w1x1 + w2x2 + w3x3 + w4x4 + w5x5 + w6x6

    算法与编程之美
  • Android逆向|去除app恶意引流弹窗

    当下app市场发展非常火热,很多厂商凭借自己的创意在app市场中获得了很多利益,由此也萌生出一些不法个体商贩通过逆向他人的app实现某些功能的破解,并以低于厂商...

    算法与编程之美
  • PS|你真的了解PS吗?

    Adobe Systems开发的Adobe Photoshop(以下简称PS),是目前最受欢迎的图像处理软件,在人们心中PS大概是一个“正经”的软件,其实不然,...

    算法与编程之美
  • 前端学习 第2周 第1天

    用户2930719
  • 学习纲要:CSS 常用选择器

    用户2930719
  • 常见选择器

    Id选择器(同一页面不能重名)# 类选择器 . 标签选择器 p 包含选择器 .box p 群组选择器 , 通配符 *

    河湾欢儿
  • 从零开始学 Web 之 CSS(一)选择器

    CSS 全称为 Cascading Style Sheets,中文翻译为“层叠样式表”,简称 CSS 样式表,所以称之为层叠样式表(Cascading Styl...

    Daotin
  • css选择器

                选择器{... !important} 则该选择器的优先级最高

    十月梦想
  • css选择器攻略

    很多小伙伴对css选择器表示不屑,觉得很简单没必要学习,其实你究竟了解多少呢?当面试官问你的时候,你能分出哪些是css3新增的选择器,他们兼容如何?又该如何处理...

    RobinsonZhang
  • CSS基础

    css:Cascading Style Sheet 层叠样式表,简而言之 就是css的样式 是可以叠加的。默认 是根据css选择器的权重,按权重进行叠加,权重值...

    lesM10

扫码关注云+社区

领取腾讯云代金券