首页 > 其他分享 >CSS层叠样式表学习

CSS层叠样式表学习

时间:2024-04-01 19:59:31浏览次数:22  
标签:层叠 样式 HTML 样式表 选择器 CSS 属性

---引入

(Hello,大家好呀,欢迎大家和squirrel一起来学习CSS的相关知识,可以在评论区进行互动答疑哦,学无止境,加油!视频学习大家可以参考B站的黑马程序员pink老师的课程哦)

一、CSS简介

(目标:能够说出什么是CSS)

CSS的主要使用场景就是美化网、布局页面的。

 1.1 HTML的局限性

  • 它只注内容的语义。比如<h>表明这是一个大标题,<p>表明这是一个段落,<img>表明这儿有一个图片,<a>表示此处有链接。它有一个特点:丑。

1.2 CSS-网页美容师

  • CSS是层叠样式表(Cascading Style Sheets)的简称。 
  • 有时我们会称之为CSS样式表或级联样式表。
  • CSS是一种标记语言。 
  • CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。 

1.3 CSS语法规范

  • 使用HTML时,需要遵从一定的规范,CSS也是如此。要想孰练地使用CSS对网页进行修饰,首先需要了解CSS样式规则。 
  • CSS规则由两个主要的部分构成:选择器以及一条或多条声明。

  • 选择器是用于指定CSS样式的HTML标签,花括号内是该对象没置的具体样式。

  • 属性和属性值以"键值对"的形式出现。

  • 属性是对指定的对象设置的样式属性,例如字体大小,文本颜色等。

  • 属性和属性值之间用英文":"分开。

  • 多个"键值对"之间用英文";"进行区分。

1.4 CSS代码风格

以下代码书写风格不是强制规范,而是符合实际开发书写方式。

1.4.1 样式格式书写

  • 紧凑格式:

h3  {  color:  blue;   front-size:  20px;  }

  • 展开格式:(更直观) 

h3

{

   color:  blue;

   front-size:  20px;

}

 1.4.2  样式大小写

h3 {

   color:  biue;

     }

H3 {

  COLOR:  BLUE;

     }

 强烈推荐样式选择器,属性名、属性值关键字全部使用小写字母,特殊情况除外。 

1.4.3  空格规范

  1. 属性值前面,冒号后面,保留一个空格。
  2. 选择器(标签)和大括号中间保留空格。

(今日分享暂时到此为止啦!努力的自己最棒,为不断努力的自己鼓鼓掌吧。今日文案分享:To win the world.) 

标签:层叠,样式,HTML,样式表,选择器,CSS,属性
From: https://blog.csdn.net/2301_79341065/article/details/137243516

相关文章

  • CSS 学习第三天 (伪·类选择器)
    #  概念什么是伪类? ——很像类,但不是类,是元素的特殊状态的一种描述#动态伪类 #常用的伪类选择器: :link  超链接未被访问的状态 :visited 超链接访问过的状态 :hover 鼠标悬停在元素上的状态 :active 元素激活 (按住左键不松开)的状态 :focus......
  • CSS3制作图片样式
    问题:如果在img上直接使用CSS3的border-radius和box-shadow应用在图片,浏览器并不会完全显示。前面在《jQuery和CSS3给图片制作圆角》中说过其解决方法,就是把图片作为背景图片,这样我们就可以应用任何样式来修饰图片,而且此时浏览器也会完美的呈现出来。解决方法:要让浏览器能正常渲......
  • CSS 如何实现羽化效果
    羽化是photoshop术语,羽化原理是令选区内外衔接部分虚化,起到渐变的作用从而达到自然衔接的效果,是ps及其其它版本中的处理图片的重要工具。一、羽化的原理羽化其实就是将边缘变得模糊,在CSS中其实就是创建一个边缘模糊的遮罩(mask),也就是需要一种半透明的渐变。关于遮罩,这里简单介......
  • css样式重置
    @charset"utf-8";html{background-color:#fff;color:#000;font-size:12px}body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}body,input,textarea,button,select,pre,xmp,......
  • 前端学习<二>CSS基础——15-Sass入门
    Sass简介大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量、不可以引用等等。面对这些问题,我们现在来引入Sass,简单的说,他是css的升级版,可以自定义变量,可以有if语句,还可以嵌套等等,很神奇吧!那下面我们就来介绍返个神奇的Sass。Sas......
  • 前端学习<二>CSS基础——14-CSS3属性详解:Web字体
    前言开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体。从此,把特殊字体处理成图片的方式便成为了过去。支持程度比较好,甚至IE低版本的浏览器也能支持。字体的常见格式不同浏览器所支持的字体格式是不一样的,我......
  • CSS继承性-行高的继承性
    CSS中行高的继承性是CSS继承特性中的一个具体表现。简单来说,如果一个元素(父元素)设置了行高(line-height),那么它的子元素会继承这个行高值,除非子元素本身也设置了行高。行高的继承性有助于保持文本在父子元素之间的一致性和可读性。例如,如果父元素的行高设置为1.5(这通常是相对于......
  • Cursor:你的前端“超能力”助手,一句话搞定HTML、CSS、JS!
    一、简介Cursor,不仅仅是一个开发工具,更是你前端路上的“超级英雄”!它融合了GPT-4的AI智慧,能听懂你的“心声”,一键将你的创意转化为神奇的HTML、CSS和JavaScript代码。告别繁琐的编码工作,让Cursor成为你创意的翅膀,带你飞翔在前端的世界!链接:Cursor官网二、功能亮点1、一......
  • 一些超级好用的CSS 属性
    1、fit-content盒子大小自适应内容案例:比如有时候我们需要根据给定的文本来调整盒子的宽度,这时候使用固定的宽度就很难调整,CSS提供的width:fit-content;2、透明色透明色的RGB值是(0,0,0,0),其中第四个参数表示透明度,取值范围是0到1。透明度为0表示完全透明,透明度为1表......
  • 18day-19day-2.2.CSS实战与提高
    2.2.CSS实战与提高练习11:制作开心餐厅页面CSS/*层次选择器*/p{font-size:14px;}/*body后代h2字体16px*/bodyh2{font-size:16px;}/*第一个h2颜色变为红色*/.firstH2{color:red;}/*第一个h2后面的通用兄弟元素h2变为蓝色*/.firstH2~h2{......