CSS入门

已于 2024-08-15 17:58:28 修改
阅读量450 收藏 3
点赞数 16
文章标签： css 前端
于 2024-08-15 16:48:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_76032270/article/details/136379711
版权

一、CSS基本语法

1. 注释

/* 这是注释 */

 2. 选择器

h2 {
  font-size: 4rem;
  /* 属性名：属性值 */
   
}
  /* 选择器格式 */
  • 选择器（规则集）包含在成对的大括号里 {}
  • 每个属性名和属性值分隔用冒号 :
  • 选择器（规则集）里要用分号 ;

二、html文件导入CSS的方式

1. 行内式

          定义html标签中通用的style属性。

<p stlye="color:black;text-decoration:underline;">

2. 嵌入式

         定义head标签中的style标签内容。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
	<style>
	   div {
	     width: 100px;
		 height: 50px;
		 border: 5px black solid;
	   }
       /* 嵌入式CSS */
	</style>
  </head>
  <body>
    <div></div>
  </body>
</html>

 3. 链接式

         定义head标签中的link标签属性。

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" />
    <link href="css/style_h.css" rel="stylesheet" type="text/css">
    <!-- href属性指定CSS文件所在URL -->
  </head>
  <body>
	<div></div>
  </body>
</html>

4. 引入式

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" />
	<style>
	  @import url(css/style_h.css)
	</style>
    <!-- 括号内指定CSS文件URL   -->
  </head>
  <body>
	<div></div>
  </body>
</html>

三、选择器的分类

1. 标记选择器

         同一标签全部应用该选择器下的样式 。

h2 {
  font-size: 4rem;
  margin: 0;
  /* 标签名 { 样式声明 } */
}

2. 类选择器

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" />
	<style>
		.box {
		  width: 100px;
		  height: 50px;
		  border: 5px black solid;
		}
        /* .类名 { 样式声明 } */
	</style>       
  </head>
  <body>
	<div class="box"></div>
    <!--标签内class属性需要指定该类名 -->
  </body>
</html>

3. ID选择器 

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" />
	<style>
		#box {
		  width: 100px;
		  height: 50px;
		  border: 5px black solid;
          /* #类名 { 样式声明 } */
		}
	</style>
	</head>
  <body>
	<div id="box"></div>
   <!--标签内id属性需要指定该类名 -->
  </body>
</html>

4. 通用选择器

        页面中所有标签应用该选择器下的样式。

* {
  box-sizing: border-box;
  transition: .2s;
  }   
/* * { 样式声明 }  */

5. 后代选择器 

        组合了两个选择器，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先：父元素，父元素的父元素（以此类推），则它们会应用该选择的器下的样式。

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul li {
        list-style-type: circle;
      }
    </style>
<!--父元素选择器 子元素选择器 { 样式声明 } -->
  </head>
  <body>
    <div>titile</div>
    <ul>
      <li>one tip</li>
    </ul>
  </body>
</html>

 四、代码书写规范

 1. 选择器

  • 变量命名全部小写。当变量由多个单词组成时，需要使用 - 将它们连接起来
  • 使用两个空格作为缩进层级
  • 属性定义必须另起一行，且以分号结尾
.login-btn {
  /* { 前跟一个空格  */     
  margin: 0;
  padding: 0;    
  font-family: Arial, sans-serif;    
  /*  :和, 后跟一个空格  */
}

  2. 颜色

  • RGB颜色值必须使用十六进制记号形式 #rrggbb ，不能使用 rgb() 
  • 带有alpha信息（透明度）的信息可以使用 rgba() 
  • 不允许使用命名色值
.success {
  box-shadow: 0 0 2px rgba(0, 128, 0, .3);
  border-color: #008000;
  color: lightgreen;        /* 避免这样使用*/
}

3. 其他

  • 尽量不使用 !important
  • url() 中的链接不加引号
  • 文本内容使用双引号
  • 在不影响功能的情况下能缩写尽量缩写

作者有话说：很多缩进之类的规则现在大部分编辑器都能做到格式化，更多的是对于命名和属性值的规则需要注意，这里只列出部分比较基础的规则。

五碗火锅
关注
CSS入门教程
打代码是一天，不打代码也是一天
04-04 3274
CSS，层叠样式表（Cascading Style Sheet），给网页中的HTML标签设置样式CSS写在一个单独的文件中，通过link标签在网页中引入 2.2.2 内部样式 CSS写在网页的head标签中，用style标签包裹 2.2.3 行内样式 CSS写在标签的style属性中 三种CSS样式引入方式的区别选择器，就是选取（查找）需要设置样式元素的方式 2.3.1 元素选择器 通过元素名称，选取（查找）相同元素，然后对相同元素设置CSS样式 小结：1、无论嵌套多少层，只要元素名称相同都会被找到通过类
CSS入门源代码 CSS入门源代码
05-20
这个压缩包文件“CSS入门源代码”提供了一些关于CSS基础和进阶知识的学习资源，主要包括以下几个方面： 1. **CSS选择器**：CSS选择器是用于选取HTML或XML文档中的元素的关键工具。基本选择器包括标签选择器（如`<p>...
CSS入门学习笔记+案例
热门推荐
itboy
06-16 31万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS入门 超详细
weixin_55816781的博客
04-12 7833
CSS 一基础认知 1.1：css的介绍 css：层叠样式表 css作用：给页面中的HTML标签设置样式 1.2css语法规则 写在哪里 css写在style标签中，style标签一般写在head标签里面，title标签下面 样式： 选择器{ 属性名:属性值; } 1.3css初体验 常见属性： color：文字颜色 font-size:字体大小 background-color:背景颜色 width:宽度 height：高度 <!DOCTYPE html> <html lang="e
TailWindCSS入门
cccdf_jjj的博客
06-15 6307
上一篇文章我们说过了如何搭建项目以及引入TailWindCSS，这篇文章我们说一下如何使用它，刚看到的时候我对这些缩写感觉很迷茫呀，官网我也没找到如何能知道具体对应的都是撒意思，后面找到一片天比较详细的介绍的文章，认真研究了一下，文章我会放在本文的最末尾。好啦话不多说，开始吧！1.screens(也可以自定义媒体查询屏幕的宽度) 2.颜色 一般都把颜色作为背景色、文字颜色或者边框颜色。举个🌰，green： 3.纵横比--aspect 4.容器--container 6.列--co.
css入门学习
山有木兮
06-25 4085
学过前端的人，对HTML语言一定不会感到陌生，因为它是前端设计最基本的工具。然而，随着网站越来越复杂，网站的维护变得越来越重要，对设计师的要求也越来越高。
头歌-CSS入门
somewon的博客
03-06 8631
四川师范大学 CSS 头歌
CSS入门使用
zz14664656的博客
12-15 1076
引入CSS的三种方式其优先级：行内样式 > 内部样式 > 外部样式。
Tailwind CSS快速入门
知识点沉淀包括不限于前端
05-24 1732
Tailwind css 对比传统css css in js 安装流程 书写技巧 速查手册
Tailwindcss 入门
weixin_45932157的博客
06-20 799
Tailwindcss 是一个功能类优先的 CSS 框架，通过 flex, pt-4, text-center 和 rotate-90 这种原子类组合快速构建网站，而不需要离开你的 HTML。它与常规的 Bootstrap、Bulma 和 Material UI 不同之处在于没有提供预设的组件，比如：按钮、菜单和面包屑等。我们这里使用的是 V3 版本的 CDN（不推荐），若想配合构建工具看看官网如何使用的。V2 的 CDN 是引入一个 CSS 文件，而 V3 引入的是一个 script。
css入门教程之学习网页布局(1)
12-11
在CSS入门教程中，学习网页布局是至关重要的一步。网页布局指的是通过CSS控制网页中各个元素的显示位置，使得整个页面结构清晰、美观且易于阅读。对于初学者来说，可能会误以为布局是创建网页的第一步，实际上，一个...
css入门入门入门入门
05-23
01_CSS快速入门.mp4可能涵盖了CSS的基础知识，包括选择器的使用、盒模型、浮动和定位，这些都是CSS初学者需要掌握的基础技能。盒模型定义了元素的尺寸，包括内容、内边距、边框和外边距。浮动和定位则是布局中的重要...
基于html的大模型调试页面
abments的博客
10-11 634
基于html的大模型调试页面
CSS高级技巧
探索软件工程的奥秘
10-09 1266
CSS 精灵，也叫CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置。优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。作用：可以为一个元素在不同状态之间切换的时候添加过渡效果。（2）作用：在网页中添加简单的、颜色单一的小图标。作用：设置整个元素的透明度（包含背景和内容）（1）字体图标：展示的是图标，本质是字体。属性：transition（复合属性）属性值：过渡的属性 花费时间（s）
uniapp实现页面开发中
CSDN_Admin0的博客
10-11 360
【代码】uniapp实现页面开发中。
在 CSS 选择器中，逗号（,）、空格（ ）和（无空格）区别
最新发布
family20102010的博客
10-12 250
空格用于后代选择器（Descendant selector），它表示选择的是匹配左侧选择器的元素的后代（子、孙、曾孙等后代）中匹配右侧选择器的元素。空格分隔的选择器可以匹配同一棵 DOM 树中，具有特定层级关系的元素。逗号用于组选择器（Grouping selectors），它表示选择多个不同的选择器，并且为它们应用相同的样式规则。逗号分隔的选择器可以匹配不同的元素，但只有当元素匹配其中一个选择器时，样式才会被应用。值得注意的是，类选择器的顺序并不重要，只要元素的类名中包含所有类选择器的条件即可。
CSS入门与优势解析
下面是一个简单的CSS入门示例： ```html <!DOCTYPE html> 第一个css程序 <!-- 在部分内使用标签来写CSS --> <link rel="stylesheet" href="css/style.css"> 我是一级标题 ``` 在这个例子中，`<style>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值