首页 > 其他分享 >前端——CSS

前端——CSS

时间:2022-08-31 21:55:55浏览次数:47  
标签:样式 前端 元素 选择器 样式表 id CSS

CSS 指的是层叠样式表 (Cascading Style Sheets)

  • 述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
  • 节省了大量工作。它可以同时控制多张网页的布局

 

CSS语法

 

CSS 规则集(rule-set)由选择器和声明块组成:

 

 

  • 选择器指向您需要设置样式的 HTML 元素。
  • 声明块包含一条或多条用分号分隔的声明。
  • 每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
  • 多条 CSS 声明用分号分隔,声明块用花括号括起来。

 

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:

  • 外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  • 内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>

</head>
  • 内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

 

 

CSS选择器:

基础选择器:

元素选择器根据元素名称来选择 HTML 元素。

p {
  text-align: center;
  color: red;
}

CSS id 选择器

  • id 选择器使用 HTML 元素的 id 属性来选择特定元素。
  • 元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!
  • 要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id。

标签:样式,前端,元素,选择器,样式表,id,CSS
From: https://www.cnblogs.com/xinbing/p/16644652.html

相关文章

  • 【前端】在浏览器控制台,直接发Ajax请求
    我们在日常的开发的过程中,经常需要前端测试发送请求测试一些数据。但是由于一些session,cookie的存在,我们无法在postman上创建一些会话。那么这样,我们就可以在浏览器上直接......
  • webpack css-loader模块化导致的antd样式不好用解决方案
    css-loader模块化会导致antd样式文件无效,解决的方式就是排除node_modules下的目标文件就可以如果你用的less就可以按以下方式来配置{test:/\.less$/,inclu......
  • 前端也该刷点算法题——双指针解“链表”题也太香了叭!
    双指针解“链表”题也太香了叭!同步双指针1查找链表中倒数第k个节点剑指Offer22.链表中倒数第k个节点思路:假设链表的长度为n,不难得出倒数第k个节点即为整数第n+......
  • 前端——HTML常用标签合集
    HTML常用标签合集●HTML——head标签●HTML——meta标签●HTML——title标签●HTML——time&datetime(时间模块)......
  • HTML入门2(学习Head First HTML与CSS 第2版)
    <a>元素的内容会成为Web页面中可单击的文本。href属性告诉浏览器链接的目标文件。<ahref="链接地址">链接名称</a>1.一个页面链接到另一个页面,要使用<a>标签。2.<a>元......
  • 前端——HTMLhead标签
    head标签作用:1.修改页面整体相关内容2.不会在页面显示head标签下的其他标签:●HTML——meta标签 ......
  • css预处理器
    CSS预编译工具有stylus,sass,less为什么会出现CSS预编译器这个东西呢?这就要谈到CSS的不足了:没有变量(新的规范已经支持了),不支持嵌套,编程可以力较弱,代码复使用性差。这些......
  • 前端面试题每日3题——2022/08/30
    1以下代码执行后,控制台中的输出内容为?for(leti=0;i<3;i++){setTimeout(()=>{console.log(i);});}for(varj=0;j<3;j++){setTimeout......
  • 前端Day13
    响应式布局:(媒体查询的运用) Bootstrap: ......
  • 【学习笔记】CSS 动画keyframes
    【学习笔记】CSS动画keyframes必要项目@keyframes动画名称对应animation-name:动画名称动画持续时间,指动画开始到结束时间,预设为0,若没有设定,动画不会执行。下......