CSS入门（样式表、选择器、class&id、网页图标、驼峰标识）

最新推荐文章于 2023-10-25 18:01:32 发布
最新推荐文章于 2023-10-25 18:01:32 发布
阅读量574 收藏
点赞数
分类专栏： 前端入门 文章标签： CSS入门 CSS学习 样式表 选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shujiaw/article/details/105672530
版权

CSS入门

什么是CSS

CSS的全称是Cascading Style Sheets，层叠样式表
CSS的作用是：可以给网页中的每一个元素设置样式，让网页更加精美，完全没有使用CSS的网页：基本就是一堆从上到下、从左到右挨在一起的文字和图片。

CSS官方文档

https://www.w3.org/standards/techs/css
https://www.w3.org/TR/CSS22/
https://www.w3.org/TR/CSS22/propidx.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS

CSS样式的书写格式

冒号:左边是样式名，冒号:右边是样式值

CSS引入方式

CSS提供了3种方法，可以将CSS样式应用到元素上

  • 内联样式（inline style）
  • 文档样式表（document style sheet）、内嵌样式表（embed style sheet）
  • 外部样式表（external style sheet）

内联样式表

将样式直接写在元素的style属性上

<div style="color: brown;background: burlywood;">文字内容</div>

内嵌样式表

将样式写在head元素的style元素中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
        选择器{
            属性名：属性值；
        }
        */
        /*单个选择器*/
        h1{
            color: burlywood;
            font-size: 50px;
        }
        /* 并集选择器 */
        h1,p,a{
            color:darkgreen;
        }
        /*类选择器*/
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <h1>网页的标题</h1>
    <p>网页段落</p>
    <a href="#">百度一下</a>
    <div class="red">hahah</div>
</body>
</html>

外部样式表

样式写在单独的CSS文件中，然后在当前网页的head元素中用link元素引用

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 使用link引入
    <link rel="stylesheet" href="css/03_css引入_外联样式表.css"> -->
    <!-- @import -->
    <style>
        @import url(css/03_css引入_外联样式表.css);
    </style>

</head>
<body>
    <!--外部样式表-->
    <h1>网页的标题</h1>
    <p>网页段落</p>
    <a href="#">百度一下</a>
    <div>hahah</div>
</body>
</html>

CSS

/*指定css文件编码*/
@charset "utf-8"

/*单个选择器*/
h1{
    color: burlywood;
    font-size: 50px;
}
/* 并集选择器 */
h1,p,a{
    color:darkgreen;
}
/*类选择器*/
.red{
    color: red;
}

如果两个CSS文件中有相同的样式，后面的会层叠前面的。

<!-- 使用link引入 -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/03_css引入_外联样式表.css">

CSS选择器（selector）

什么是CSS选择器

按照一定的规则选出符合条件的元素，为之添加CSS样式

归类

  • 通用选择器（universal selector）
  • 元素选择器（type selectors）
  • 类选择器（class selectors）
  • id选择器（id selectors）
  • 属性选择器（attribute selectors）
  • 组合（combinators）
  • 伪类（pseudo-classes）
  • 伪元素（pseudo-elements）

通用选择器（universal selector）

<style>
        /*通配选择器*/
        *{
            /* color:darkgreen; */
            background-color:red;
        }
    
    </style>

元素选择器（type selectors）

div{
            background-color: red;
        }

类选择器（class selectors）

.one{
            color: royalblue;
        }
        
<div class="one">我是div元素</div>

class&id

class注意点

  • 一个元素可以有多个class值，每个class之间用空格隔开
  • class值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
  • 最好不要用标签名作为class值

id选择器（id selectors）

id值为one的元素在这里插入图片描述

id注意点

  • 一个HTML文档里面的id值是唯一的，不能重复
  • id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
  • 最好不要用标签名作为id值

设置网页图标

<link rel="shortcut icon" href="https://g.csdnimg.cn/static/logo/favicon.ico" type="image/x-icon">
  • link元素的rel属性不能省略，用来指定文档与链接资源的关系
  • 一般rel若确定，相应的type也会默认确定，所以可以省略type
  • 网页图标支持的图片格式是ico、png，常用大小是16x16、24x24、32x32（单位：像素）

驼峰标识

  • 小驼峰: 第一个单词的首字母小写, 后面遇到一个单词首字母就大写
    • html class小驼峰
    • js 函数名字
  • 大驼峰: 所有的单词首字母都大写
    • js中定义类的名字

span元素

  • 默认情况下，跟普通文本几乎没差别
  • 用于区分特殊文本和普通文本，比如用来显示一些关键字
请不要再掉头发了
关注
专栏目录
css区分大小写吗,我可以在CSS类名称中使用驼峰式大小写吗
weixin_39866874的博客
08-04 830
我想命名一个CSS类，并将其命名为imgSuper。 我可以在CSS类中使用骆驼箱吗？从技术上讲是可以的，但这是有风险的，因为CSS语法大多数情况下不区分大小写，但在某些情况下，在某些浏览器中，类名被视为区分大小写，因为规范未指定将CSS规则与HTML类匹配时浏览器应如何处理大小写名称。根据规范，第4.1.3节：All CSS syntax is case-insensitive within t...
CSS(Cascading Style Sheets) 层叠样式表
qq_55636063的博客
05-08 698
基础CSS
练习-css样式转js的驼峰写法
weixin_44573096的博客
08-11 583
要求：封装函数，能够将css的样式写法修改成js的驼峰写法(如background-color => backgroundColor) 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
css样式中&的用法
最新发布
qq_43916187的博客
10-25 7219
6、&:nth-child(n)和&:nth-of-type(n)：表示选择特定位置的子元素或同类型元素。在css中，“&”符号通常用于选择器中，表示选择某个元素的子元素或特定状态下的元素。3、&::before和&::after ：表示在当前元素的前面或后面插入伪元素。5、&[attribute=value] ：表示选择具有特定属性和属性值的元素。4、&:hover和&:focus ：表示鼠标悬停或聚焦时应用的样式。1、&- ：连接父元素和子元素的类名。2、&. ：连接父元素和子元素的类名。
CSS复合样式&id选择器&class选择器
sz1125218970的博客
12-13 1123
笔记
css复合属性转换为驼峰式,JS实现的驼峰式和连字符式转换功能分析
weixin_31585653的博客
08-03 472
本文实例讲述了JS实现的驼峰式和连字符式转换功能。分享给大家供大家参考，具体如下：在网上找的这段,比较喜欢1.驼峰转连字符:var s = "fooStyleCss";s = s.replace(/([A-Z])/g,"-$1").toLowerCase();//利用正则进行替换,简洁明了,很棒2.转驼峰var s1 = "foo-style-css";s1 = s1.replace(//-(/w...
css中id和class的定义格式、使用技巧及选择
09-25
在CSS（层叠样式表）中，`id`和`class`是两种常见的选择器，它们用于定位和应用样式到HTML元素。理解它们的定义格式、使用技巧以及选择的策略对于编写高效且易于维护的CSS代码至关重要。 首先，让我们来看看它们的...
CSS样式--CSS选择器
小乔与你同在
11-30 224
1 选择器的概述 css选择器，能对HTML结构中的一个或者一类元素通过选择器属性进行标记，然后可以通过这些标记找到对应的元素，为其添加样式。 1.1 选择器分类 1.1.1 标签选择器 通过标签的名字，找到与标签名对应的元素： 示例： 选择器( 标签名 )：div{ margin:0; } 选中标签： **<div></div>** 特...
CSS基础选择器+进阶选择器+伪类选择器
weixin_58139900的博客
09-16 211
目录 学习目标 什么是选择器 基本选择器 通配选择器 元素名称选择器 类选择器 id选择器 类与id的命名规则 总结 复合选择器 常用复合选择器 后代元素选择器 子元素选择器 语法 相邻选择器 交集选择器 并集选择器 伪类选择器 复合选择器的优先级问题 总结 （1）连接符不参与优先级计算（2）*的优先级为0（3）同级之间比较个数，不同级之间不可跨越 学习目标 掌握常用选择器的使用 熟悉选择器的优先级关系 掌握调试工具的基本使...
第三章 css选择器的命名
weixin_47330762的博客
07-19 591
1.大小写问题 众所周知，在html中，标签和属性名是不区分大小写的，但是属性值是区分大小写的。所以在css中，标签选择器和只涉及属性名的选择器是不区分大小写的。 DIV{ ...code... } [CLASS]{ ...code.... } 2.命名的合法性问题 2.1最好类名选择器和ID选择器不要用数字开头，如果真的要用需要用 \xx (十六进制来代替直接写十进制)并且后面需要加上一个额外的空格比如.\31 -foo{}想表达的其实就是class=“1-foo”。当然了，这个空格是绝对的，比
class选择器第一个_[网页编程]-06 CSS3 选择器
weixin_39611510的博客
12-28 196
下面介绍一下CSS3中新增的内容,实际开发中用的不多,主要还是因为后出,所以用的不多,主要是要知道是什么在CSS2及CSS3中实际上用的最多的就是基础选择器中的: id class(最多) 标签 和关系选择器中的 : > + ~ 以及伪类选择器中的: hover 01,伪类选择器操作子元素01.1操作第一个子元素01.2操作最后一个元素01.3操作具...
纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）
qq_38394175的博客
08-05 812
1.三角形 <div class="box"></div> <style> .box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid red; } </style>
class选择器的命名规范
qq_42852004的博客
06-05 2214
class选择器： 命名规则： 1.不能以数字开头 2. 以小写字母开头 3.不能以中文命名 4. 尽量不要用拼音 5. 见名知意 6.使用 - 或 _ 7.驼峰命名bannerBox， 第二个单词首字母大写 id选择器： （1）id选择器具有唯一性（在整个页面结构中只能出现一次） （2）与class的区别是class可以在结构中多次出现 后代选择器： （1）从第一个元素找到某一个后代元素 （2...
Web学习（二）CSS
May the Force be with you
03-11 1011
Web学习（二）CSS 1.样式定义方式 行内样式表（inline style） 直接定义在标签的style属性中。 作用范围：仅对当前标签产生影响。 例如： <img src="/images/mountain.jpg" alt="" style="width: 300px; height: 200px;"> 内部样式表（internal style sheet） 定义在style标签中，通过选择器影响对应的标签。 作用范围：可以对同一个页面中的多个元素产生影响。 外部样式表（exter
CSS：字体图标
李建雨的博客
11-10 93
1、去哪里得到字体图标的文件？ 字体图标的本质是一种字体文件，那么去哪里能挑选并下载字体图标的文件呢？ 我们可以登录并使用阿里巴巴的一个专门的字体图标网站iconfont-阿里巴巴矢量图标库去挑选并下载想要的字体图标。 2、字体图标的使用 字体图标的使用分为三步。 首先，使用link将下载好的iconfont.css文件进行引入 <link rel="stylesheet" href="./font/iconfont.css"> 然后，将iconfont和icon-zhaoxia
css添加图标_CSS：将图标添加到您的网页
cunfen6312的博客
07-29 3096
css添加图标 CSS：将图标添加到您的网页 (CSS: Adding Icons to your Webpage) Icons make the content on your website more visual. Generally, icons are used in buttons alongside text, in navigation menus, or alongside s...
前端之CSS
zhanghangqian的博客
05-03 364
前言：前面的HTML描述了一个人的“骨架”，即页面的结构和内容，那这里的CSS代码就是对这个人的“皮”的描述。即页面的样式，这个人长啥样。 1.CSS的基本语法 CSS的语法规则非常简单，即每一个CSS语句分为两个部分，即选择器和应用的属性 <style> p { /*设置字体大小*/ font-size : 10px; /*设置字体颜色*/ color : red; } </style> <p>hello</p&...
css选择器（[class*=" icon-"], [class^=icon-] 的区别）
angou6476的博客
12-11 671
官方解释： [attribute^=value]，a[src^="https"]，选择其 src 属性值以 "https" 开头的每个 <a> 元素。 最低要求：css3 [attribute*=value]，a[src*="abc"]，选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 最低要求：css3 用[class*=" icon-"...
优化的div+css ID与class命名规范解析
本文主要介绍了在CSS样式表中，如何为`id`和`class`选择器进行有效的命名，以提高代码的可读性和可维护性。内容包括`id`和`class`的区别以及常见的命名规则。 在CSS中，`id`和`class`是两个重要的选择器，用于为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值