首页 > 其他分享 >css样式

css样式

时间:2024-03-21 12:22:41浏览次数:26  
标签:body 样式 color import 选择器 css

样式的引入方法

内部样式

点击查看代码
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body {
            background-color: #000;
        }
    </style>
</head>

行内样式

<span style="color: red;">红色字体</span>

外部样式 link引入和@import引入

注意@import引入必须放在 style的前面
<link href="a.css" rel="stylesheet" type="text/css"/>

点击查看代码
    <style type="text/css">
        @import url("a.css");
        body {
            background-color: #fff;
        }
    </style>

CSS特性 继承性

继承性是指后代元素继承祖先元素的样式,继承样式主要包括字体、文本等基本属性。如:字体、字号、颜色、行距等。不允许继承的属性有边框、边界、补白、背景、定位、布局、尺寸等。

CSS特性 层叠性

层叠性是指对同一个对象应用多个样式的能力 不同选择器的权重不一样,注意区分 important表示权重最高 无限高
font-size: 12px!important;

CSS选择器

元素选择器(标签选择器、类选择器、ID选择器、通配选择器)

标签选择器:直接选择所有html标签,如body、p、a等

body{ font-size: 12px!important; }

类选择器

以(.)为前缀,后面是一个类名,可直接在 网页上使用
.red{color: red;}

<span class="red">红色字体</span>

ID选择器

标签:body,样式,color,import,选择器,css
From: https://www.cnblogs.com/caoruipeng/p/18087084

相关文章

  • 深入理解 CSS:基础概念、注释、选择器及优先级
    在构建网页的过程中,我们不仅需要HTML来搭建骨架,还需要CSS来装扮我们的网页。那么,什么是CSS呢?本文将带大家了解css的基础概念,注释、选择器及优先级。一、CSS简介1.1什么是CSSCSS,全称为CascadingStyleSheets(层叠样式表),是一种用于描述网页上的信息格式化和显示方式的语言。它的......
  • CSS样式表 样式优先级 选择器以及选择器的权重优先级
     CSS组成    css由选择符和声明组成,声明又分为属性和属性值    属性必须放在花括号里面,属性与属性值必用冒号连接    每条声明用分号结束    当一个属性有多个属性值的时候,属性值与属性值部分先后顺序,用空格隔开    在书写样......
  • html5&css&js代码 031 又一个计算器
    html5&css&js代码031又一个计算器一、代码二、解释又一个计算器页面。一、代码<!doctypehtml><htmllang="zh-cn"><head><metacharset="UTF-8"><title>计算器</title><style>body{......
  • geoserver之shp图层标注样式
    geoserver之shp图层标注样式sld代码由udig生成。sld代码:<?xmlversion="1.0"encoding="GBK"?><sld:StyledLayerDescriptorxmlns="http://www.opengis.net/sld"xmlns:sld="http://www.opengis.net/sld"xmlns:gml="http://www.......
  • 01-CSS基础(选择器)
    一、css基本语法1、CSS概述CSS指层叠样式表(CascadingStyleSheets)样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一个......
  • css设置背景模糊周边有白色光晕,如何解决?
    <divclass="img-box"><img:src="xxx.png"><divclass="img-bg":style="{'background-image':`url(`+xxx.png+`)`}"></div></div>.img-box{width:1......
  • css 元素显示模式
    block(块级元素):页面中独占一行,宽度撑满父元素,高度由内容展开,可以由css设置宽高。(如div)inline(内联元素):一行中排不下的元素会在下一行从左到右排列,宽度和高度由内容决定,无法由css设置宽高。(如span、sub、a、label、br)inline-block(行内块元素):一行中排不下的元素会在下一行从左到右排......
  • css如何通过媒体查询功能实现界面的自适应
    CSS中的媒体查询功能允许您根据不同的设备或屏幕尺寸应用特定的样式规则,从而实现界面的自适应。下面是一个简单的示例,展示如何使用媒体查询来实现自适应布局:htmlCopy code<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name=......
  • 19.html+css网页设计实例/“美妆”口红主题介绍/web前端期末大作业/
    前言本文以“美妆”口红网页为主题设计,本实例系统文件种类包含:html结构文件、css网页样式文件。应用DIV、点击事件、表格、搜索等,供大家参考。【关注作者|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!看到这里就【点赞收藏博文】,三连支持下吧,3Q!有兴趣的......
  • postcss-px2rem 的使用
    两种方法:1、不改变第三方组件的样式第一步先卸载安装的postcss-px2remnpmuninstallpostcss-px2rem安装postcss-px2rem-excludenpmipostcss-px2rem-exclude--save第二步在项目根目录下面建立postcss.config.js文件 module.exports={plugins:{......