0


前端三件套之一的CSS体验卡

各位好,我是小饼干🍪,一个编程界的小学生,每天都希望学习一点点编程相关。前端三件套分别是HTML,CSS,Javascript,前端的内容太多本文浅浅地体验一下。感谢各位的驻足,笔芯♥。

这里写目录标题

2,CSS

2.1 概述

CSS 是一门语言,用于控制网页表现。

CSS也有一个专业的名字:Cascading Style Sheet(层叠样式表)。

2.2CSS导入方式

CSS 导入 HTML有三种方式:

  • 内联样式:在标签内部使用style属性,属性值是css属性键值对<divstyle="color: red">Hello CSS~</div>> 给方式只能作用在这一个标签上,如果其他的标签也想使用同样的样式,那就需要在其他标签上写上相同的样式。复用性太差。(很不建议)
  • 内部样式:定义<style>标签,在标签内部定义css样式<styletype="text/css">div{color: red;}</style>> 这种方式可以做到在该页面中复用。一般写在body快要结束的地方
  • 外部样式:定义link标签,引入外部的css文件编写一个css文件。名为:demo.css,内容如下:div{color: red;}在html中引入 css 文件。<linkrel="stylesheet"href="demo.css">> 这种方式可以在多个页面进行复用。其他的页面想使用同样的样式,只需要使用 > > link> > 标签引入该css文件。

代码演示:

项目目录结构如下:

编写页面

02-导入方式.html

,内容如下:

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>span{color: red;}</style><linkhref="../css/demo.css"rel="stylesheet"></head><body><divstyle="color: red">hello css</div><span>hello css </span><p>hello css</p></body></html>

2.3 css 选择器

css 选择器就是选取需设置样式的元素(标签),比如如下css代码:

div{color:red;}

如上代码中的

div

就是 css 中的选择器。我们只讲下面三种选择器:

  • 元素选择器格式:元素名称{color: red;}例子:div {color:red} /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/
  • id选择器格式:#id属性值{color: red;}例子:html代码如下:<divid="name">hello css2</div>css代码如下:#name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/
  • 类选择器格式:.class属性值{color: red;}例子:html代码如下:<divclass="cls">hello css3</div>css代码如下:.cls{color: red;}/*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/

(区别在于,id只能给一个标签使用,class可以给多个标签使用)

代码演示:

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{color: red;}#name{color: blue;}.cls{color: pink;}</style></head><body><div>div1</div><divid="name">div2</div><divclass="cls">div3</div><spanclass="cls">span</span></body></html>

2.4 css 属性

css属性可以在W3school查找观看。不做过多说明
在这里插入图片描述

标签: java 前端 html5

本文转载自: https://blog.csdn.net/m0_69528918/article/details/124236091
版权归原作者 我不算小饼干 所有, 如有侵权,请联系我们删除。

“前端三件套之一的CSS体验卡”的评论:

还没有评论