前端学习日记5

最新推荐文章于 2024-11-13 22:57:03 发布

失眠收容站

最新推荐文章于 2024-11-13 22:57:03 发布

阅读量505

点赞数

分类专栏：前端文章标签： html5 前端 css

本文链接：https://blog.csdn.net/qq_53321156/article/details/128800035

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS语法及选择器

文章目录

6.VS code中如何创建和编写CSS样式？

前言

HTML诞生于20世纪90年代初，它的缺陷：代码臃肿，定位困难，维护困难，标记不足。这就有了CSS的出现。

一、CSS概述

CSS（Cascading Style Sheet）称为层叠样式表，用于设置页面的显示风格，如页面的布局、字体、颜色、背景、动画等，是一种美化网页的技术。在HTML基础上，使用CSS不但能够统一、高效地组织页面上的元素，而且还可以使页面的外观具有多样化。

二、CSS基础语法

1.CSS构造规则

CSS样式表由若干条样式规则组成，由三部分组成：选择器（或称选择符）、属性和属性值。

选择器指定对文档中的哪些对象（即网页元素）进行样式定义。

属性和属性值构成的键值对表示一条样式规则，即定义所选择网页元素的视觉表现形式。

属性和属性值之间实用冒号相连，多条样式之间用分号相隔开。

使用花括号将所有样式包围起来

代码如下（示例）：

css选择器{
          属性1：属性值1；
          属性2：属性值2；
            ... ... ... ...}

基本格式：selector{
                property1:value1;
                property2:value2;
                ...;}
实例：p{
        font-size:20px;
        color:red;}

2.CSS注释

实例：/*nav导航css样式*/
     nav{
             /*font-family:宋体;
             font-size:20px;*/
             color:red;}
实例：<style type="text/ss">
          <!-- p{
              font-size:20px;}
          -->
      </style>

注意：不是css注释，而是为了避免不识别<style>标签的浏览器错误地在页面显示样式规则。

3.CSS基础语法

尽量不缩写，除非一看就明白的单词

全部小写，尽量统一使用英文或拼音

每一条样式写成一行

ID必须是唯一的

<style type="text/ss">
       p{
          color:blue;
          font-size:20px;
        }
<style/>

三.CSS调用方式

1.内嵌样式（推荐）

内嵌样式就是将CSS样式代码添加到<head>与</head>之间，并且使用<style>和</style>标记进行声明。

这种写法虽然没有实现内容和表现的完全分离，但可以设置一些比较简单的样式，并统一页面样式。

<style type="text/css">
      p{
        font-size:20px;}
</style>

注意：内嵌样式不适用于当一个网站的多个页面都希望使用相同的元素拥有同样风格的场合。

2.行内样式（不推荐）

行内样式（或称为内联样式）是所有样式中比较简单，直观的方法，就是直接把在CSS代码添加到HTML标记/签中，即作为标签的属性。

<p style="font-size:20px;color:red;">博客</p>

注意：尽管行内样式简单，但这种方法不常使用，因为这样添加无法完全发挥样式表“内容后表现分离”的优势；而且也不利于样式的复用。

3.链接样式（首推）

链接样式是指在外部定义CSS样式表，并形成以.css为扩展名的文件，然后在页面中通过<link>链接标记，链接到页面中，且<link>标记必须放在<head>标记区。

<head>
    <link rel="stylesheet" type="text/css" href="3.5css"/>
</head>

rel,type,和href属性，type属性可不填

优势：将CSS代码与HTML代码完全分离；同一个CSS文件能被不同页面使用。

声明css文件的编码方式：@charset"utf-8";

步骤：

首先，定义一个sheet_x.css文档：

h2{color:#0000FF;}

p{color:#FF0000; font-weight:bold;font-size:15px;}

其次，在HTML中使用：

<html>
   <head>
      <title>页面标题</title>
      <link href="sheet_x.css" type="text/css" rel="stylesheet">
   </head>
   <body>
      <h2>CSS标题1</h2>
      <p>这是正文内容1......<p>
   </body>
</html>

4.导入样式

与链接样式类似，在外部定义CSS样式表，并形成以.css为扩展的名的文件，然后在<style>标记区导入CSS样式表。

<style>
        @import url("sheet_x.css");
</style>

与链接样式的区别：

在HTML文件初始时被导入到文件中，作为文件的一部分；而后者是在HTML标记需要样式风格时才以链接的方式引入。显然，后者可加快页面的初始化。

5.优先级

行内样式与内嵌样式比较：

<style>
  .p{color:red;}
</style>
<p style="color:blue;">段落应用样式</p>

内嵌样式与链接样式，导入样式比较：

结论：行内样式》》内嵌，链接与导入样式三者按就近原则

6.VS code中如何创建和编写CSS样式？

转载至Vscode中css样式书写提示的插件及使用方法

快速生成CSS,HTML代码

四.CSS选择器

1.元素选择器

类型	基本语法	说明
标签选择器	E{property: value}	适用于标签中的所有元素
类选择器	.class{property: value}	为一系列元素定义相同样式
ID选择器	#id{property: value}	针对特定（一个）元素
全局选择器	*{property: value}	表示选择所有元素

一个元素只能有一个唯一的ID，但可以属于多个类。

<p class="c1 c2"></p>

表示p元素同属于c1和c2类

2.复合选择器

类型

基本语法

说明

并集选择器

E1, E2, E3 {property: value}

多个选择器使用相同样式

交集选择器

E.myclass

E#myid

选择类名为class或id为myid的E元素

类型	基本语法	说明
包含选择器	E F	选择所有被E元素包含的F元素。
子选择器	E>F	选择所有作为E元素的子元素F。
相邻选择器	E+F	选择紧贴在E元素之后F元素。
兄弟选择器	E~F	选择E元素后的所有兄弟元素F。

包含选择器与子选择器的区别：包含选择器包括子子孙孙F元素，而子选择器只选择子代F元素，而忽略孙辈元素。

3.元素状态选择器

指定样式只有当元素处于某种状态时才起作用。

选择器	说明
E:link	设置超链接a在未被访问前的样式。
E:visited	设置超链接a在其链接地址已被访问过时的样式。
E:hover	设置元素在其鼠标悬停时的样式。
E:active	设置元素在被用户激活（点击与释放之间）时的样式。
E:focus	设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。
E:checked	处于选中状态的元素E
E:enabled	处于可用状态的元素E
E:disabled	处于禁用状态的元素E

注意：focus规则在active规则之后会覆盖active样式

4.伪对象选择器

选择器	说明
E:first-letter	设置对象内的第一个字符的样式。
E:first-line	设置对象内的第一行的样式。
E::selection	设置对象被选择时的颜色。
E:before	设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after	设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

content属性

用于定义元素之前或之后放置的生成内容（通常是行内元素）

语法：content:string|url()|attr()

取值：

string:插入字符串

url():使用指定url地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）

attr():插入标签属性值

通常，用来和::after及::before伪元素一起使用，在对象前或后显示内容。

五.CSS的继承性

继承是一种机制，它允许样式不仅可以应用与某个特定的元素，还可以应用于它的子元素。简单说，子元素继承父元素的样式，并可以在此基础上创建新的样式风格。

CSS中并非所有属性都支持继承！

文本相关的属性可以被继承，

如：font,font-family,font-size,font-style,font-variant,font-weight,text-decoration,font-size,letter-spacing,word-spacing,line-height,text-align,text-indent,word-spacing

列表相关的属性可被继承，

如：list-style-image，list-style-position，list-style-type

颜色相关的可以继承，如color

CSS中不可以继承的属性

如：margin,border,padding,background,height,min-height,max-height,width,min--width,max-width,display,overflow,position,left,right,top,bottom,z-index,float,clear,table-layout,vertical-align.

六.CSS的层叠性

CSS的意思就是层叠样式表，所谓层叠可以被理解为覆盖的意思，是CSS中样式冲突的一种解决办法。

一个元素被同一个选择器多次定义，或被多个类选择器选中时，采用最后被定义的样式（就近原则）

h1{color:red;}
h1{color:blue}

.purple{color:purple;}
.red{color:red;}
<p class="purple red">类选择器</p>

当同一元素被不同选择器选中时，优先级关系：ID选择器》类选择器》标签选择器

总结

使用CSS，将样式和内容分割开来，更加方便清晰的展示代码，也能使我们更强的理解代码。

失眠收容站

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录