CSS定义及使用

最新推荐文章于 2022-05-20 23:36:12 发布
最新推荐文章于 2022-05-20 23:36:12 发布
阅读量1.1k 收藏
点赞数
分类专栏： web开发 文章标签： css html class 扩展
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xieyf_0413/article/details/1050376
版权
 
CSS定义及使用
CSS是Cascading Style Sheet的缩写，中文译为“层叠样式表”。它的主要功能是定义网页数据的编排、显示、格式化及特殊效果，它扩展了HTML的功能。
一． CSS 样式的基本语法：
       选择符{属性1：值1；属性2：值2；…..}
二．常用的几种定义及使用方法：
1 ．选择符为 HTML 标记符
              如：H2{text-align:center;"">黑体}
                     H1,H2,H3,H4{"">黑体;color: blue}
              注：如果多个标签具有相同的属性，则可以放在一起，用“，”隔开。
              例1:  < html >
                      < head >
                            < title > CSS 范例 1 </ title >
                            < style type =" text/css ">
                            <!--
                                   P{color: blue}
                                   P I{color: red}
                                   I{color: yellow}
                                   H1{color: purple}
                            -->
                            </ style >
                            </ head >
                            < body >
                                   < p > 我的颜色是蓝色 < I > 我是斜体红色 </ I > 我的颜色也是蓝色 < p >
                                   < H1 > 我的颜色是紫色 < I > 我是斜体黄色 </ I > 我的颜色也是紫色 </ H1 >
                            </ body >
                     </ html >
2 ．选择符为 ID 选择符
              格式：#ID选择器名称{属性：属性值；属性：属性值….}
                      <标签名称 ID=”ID选择器名称”>内容</标签名称>
              例2：        < html >
< head >
< title > CSS 范例 2 </ title >
< style type =" text/css ">
<!--
#first{color:blue}
#second{color:red}
#third{color:yellow}
-->
</ style >
</ head >
< body >
< H1 ID =" first "> 这个 H1 标题内的文字，其色彩均为蓝色 </ H1 >
< P ID =" first "> 这个段落内的文字，其色彩均为蓝色 </ P >
< H2 ID =" second "> 这个 H2 标题内的文字，其色彩均为红色 </ H2 >
< P ID =" second "> 这个段落内的文字，其色彩均为红色 </ P >
< H3 ID =" third "> 这个 H3 标题内的文字，其色彩均为黄色 </ H3 >
< P ID =" third "> 这个段落内的文字，其色彩均为黄色 </ P >
</ body >
</ html >
 
 
3. 选择符为用户自定义的类 CLASS
              如：.mystyle{color: red}
              注：可以用任何名称命名；在<body>里的所有元素都可以定义“类”；
              例3：        < html >
< head >
< title > CSS 范例 3 </ title >
< style type =" text/css ">
<!--  h1.mycolor{color:blue;}
.yourcolor{color:red;}
-->
</ style >
</ head >
< body >
< h1 CLASS =" mycolor "> 我的颜色是蓝色 </ h1 >
< h1 CLASS =" yourcolor "> 我的颜色是红色 </ h1 >
< h2 CLASS =" mycolor "> 我的颜色是蓝色 </ h2 >
< h2 CLASS =" yourcolor "> 我的颜色是红色 </ h2 >
</ body >
</ html >
4 ．选择符为虚类
              定义：指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。
              格式：HTML元素：伪元素{属性：值}
              注：伪元素主要有：
                     :link   :hover   :active   :visited   :first-child   :first   :left   right
                     :lang   focus   :after   :first-letter   :first-line   :before
              例4：超链接的例子
                                < html >
< head >
< title > CSS 范例 4 </ title >
< style type =" text/css ">
<!--  p:first-letter{color:red;}
p:first-line{color:blue;}
p:link{color:red;}
p:visited{color:blue;}
p:active{color:yellow;}
p:hover{color:green;}
-->
</ style >
</ head >
< body >
< p >first<br> letter</ p >
< p > xieyanfeng </ p >
< a href =" http://www.sohu.com "> 搜狐网站 </ a >
</ body >
</ html >
5 ．选择符包含属性元素
              格式：HTML标签[属性]{属性：属性值；属性：属性值；….}
                          HTML标签[属性＝值]{ 属性：属性值；属性：属性值；….}
              例如：h[title] { color: blue; } /* 所有具有title属性的h对象 */
                          span[class=demo] { color: red; }/*所有class属性值为demo的span对象*/
      三．总结
       以上就是关于CSS常用的几种定义及使用方法，CSS作为HTML的补充渲染起着非常重要的作用。想了解CSS更加详细使用方法的朋友建议阅读一下 苏昱的《样式表中文手册》，该书写的相当不错，本人强烈推荐。需要的朋友可以站内留下 E-mail 向本人索取。
 
                           
 
 
 
xieyf_0413
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS的定义及应用
weixin_45366028的博客
10-26 941
一· CSS的概述 1.最初的web是没有CSS的，只有一些HTML的标签，这些是最初被设计用于定义网页内容。对表现形式没有关注，随着WEB的发展，web得到了越来越广泛的应用，为了解决网页不好的问题，W3C组织对wed引用了css规范。 使用CSS表现网页具有以下几点好处： （1）将格式和结构分离 结构和格式的分离，有利于格式的重用及网页的修改维护 （2）精确控制页面布局 能够对网页布局，颜色，...
css的声明与应用
weixin_33834137的博客
06-22 660
ＣＳＳ　的声明方式 ＣＳＳ的声明有三种方式： 一、基本声明：最典型的ＣＳＳ声明方式。 element {property: value}　用中文来表示的话，也就是元件(标签) {性质(属性)名称: 设定值}例如： H3 {COLOR: BLUE}　即为一组声明。 二、集体声明：同时声明某个或数个元件(标签)（各元件(标 签)间以逗号分隔）的一组或数组样式规则(性质)（各组规则间以分号分隔）...
css 简单概念与使用方法
一个随缘学习的猿
01-31 2320
CSS : 层叠样式表(英文全称:Cascading Style Sheets）。看完本篇文章，你就大概了解了css 1. 简介：是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用 标记语言的一个子集)等文件样式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网...
css的定义和基本使用方法
Sax_summersong的博客
12-26 2200
css基本标签和用途 1.css和HTML的区别： 首先两者都是网页的组成部分，html主要构成网页的整体框架，css主要描述网页的内容。————比如：html里面有个杯子，css里面就是杯子的高度，宽度等一系列的值。其次两者写代码的区域有所不同，html的内容主要写在body标签里面，css的内容主要写在head标签里面（也可以写在专门css的文件里面–比如1.css） 2.css如何使用 css的代码需要写入head标签里面，还需要style标签<style type="text/css"&gt
CSS知识点总结(一)定义、使用方式及常见属性
qq_25178609的博客
09-06 383
一、颜色属性 color属性定义文本的颜色： 1.color：green ；（颜色对应的英文名称） 2.color：#FF0066 ；（十六进制）分为三段，分别表示R,G,B取值 简写形式，当每个颜色的取值重复时，简写为#F06； 3.color：rgb（255,0,0）；（RGB模式） 4.color：rgba（255,0,0,1）；（RGB模式和Alpha色彩空间透明度）Alpha取值范
Dreamweaver CS6中使用CSS定义链接样式.pdf
07-10
下面我们将详细讨论如何在Dreamweaver CS6中使用CSS定义链接的四种伪类状态，并了解如何定义局部链接样式。 1. 链接的四种伪类状态： - a:link: 这个伪类用于未被访问过的链接，通常设置为不同的颜色或下划线来...
CSS定义问题.docx
03-11
CSS 样式表定义和使用方法 CSS 样式表是一种重要的 Web 页面设计技术，它使得网页内容与样式定义彻底分开，甚至可以将 CSS 保存为 .css 文件，使用时再进行调用导入。这样就可以通过定义和修改 CSS 达到页面设计的...
CSS百分比定义高度为什么没有效果
09-25
给div设置height=50%，往往没能看到效果，这是因为百分比的大小是相对其父级元素宽高的大小，如最外层元素设置的百分比是对应屏幕而言的
使用CSS脉动星球效果
最新发布
12-19
使用CSS脉动星球效果，CSS（层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态...
css中id和class的定义格式、使用技巧及选择
09-25
理解它们的定义格式、使用技巧以及选择的策略对于编写高效且易于维护的CSS代码至关重要。 首先，让我们来看看它们的定义格式： **ID选择器** 的定义格式是在HTML中使用`id`属性，形如`id="aaa"`。在CSS中，我们...
样式表中文手册（苏昱）
05-13
本手册是 Rainer's DHTML Library 产品的一部分。 　　本手册针对的是已有一定网页设计制作经验的读者。其目的是提供完整清晰的样式表内容的快速索引及进阶帮助。所以对于网页制作和样式表的基础知识，仅简单介绍，恕不赘述。 　　手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准，以及 Internet Explorer 和 Netscape 各自的私有内容。出于种种众所周知的原因考虑，本手册以浏览器的事实标准—— Internet Explorer 为主。
css定义和应用的方式
勇往直前
03-15 157
第一种：自定义方式，引用方式为&lt;p class="blue_14_20"&gt;这是一段文字&lt;/p&gt; .blue_14_20 { font-size: 14px; line-height: 20px; color: #00F; }  第二种：id方式，引用方式为&lt;p id="blue_14_20"&gt;这是一段文字&lt;/p&gt; #b...
css样式表定义和使用
ray2580的博客
04-25 289
css样式表 https://blog.csdn.net/skye_95/article/details/81121752
CSS初步--定义和应用样式
RainMcCom的博客
11-06 1049
定义和应用样式 CSS样式由一条或多条以分号隔开的样式声明组成，每条声明包含着一个CSS属性和该属性的值，二者以冒号分隔。 例如：background-color:grey; color:white。1.使用元素内嵌方式：使用全局属性style将样式应用到具体的某些元素上去。例如：<a title="测试内容" href="http://www.baidu.com" style="backgro
CSS概念及用法（持续更新中）
weixin_57197500的博客
05-20 1252
便于初学者进行对于css的使用查询
CSS主要功能及定义
Dream_Mr.wang的专栏
02-27 3132
CSS主要功能及定义 主要功能： 1、可创建新模板，开始创建的新模板的CSS代码为“默认”模板的代码 2、可对您定义的模板CSS进行“编辑”、“重命名”、“删除”、“使用”等操作。 3、在保存自定义CSS后系统会自动生成套入该CSS的空间主页截图，点击该截图可预览效果。 4、点击系统模板截图可预览套入系统模板CSS的空间效果。 5、高级设置页将原有的编辑自定义CSS与自定义模
CSS的概述
qq_40208605的博客
04-04 2396
1.1CSS的概述1.1.1CSS是什么 CSS 通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容（字体、大小、对其方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。 CSS可以是HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更佳灵活，更容易绘制出用户需要的结构。 1.1.2CSS名词解释 CSS (Cascad...
css 的介绍（定义、作用、基本语法、css注释）
热门推荐
IT之一小佬的博客
04-18 1万+
css 的介绍 1. css 的定义 css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。 没有使用css的效果图 使用css的效果图 2. css 的作用 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。 控制页面布局, 比如: 设置浮动、定位等样式。 3. css 的基本语法 选择器{ 样式规则 } 样式规则： 属性名1：属性值1; 属性名2：属性值2; 属性名3：属性值3; ... 选择器:是用来选择标签的，选
css定义方式
hoho_12
08-03 2832
css定义方式
nextjs使用jsx定义css
06-09
在Next.js中，可以使用JSX语法来定义CSS，这是通过使用CSS-in-JS库（如styled-components、emotion、CSS modules等）来实现的。这些库允许你在JSX中定义CSS样式，使CSS代码更加模块化和可维护。 例如，使用styled-components库，你可以这样定义CSS样式： ```jsx import styled from 'styled-components'; const Button = styled.button` background-color: blue; color: white; font-size: 16px; `; function MyComponent() { return ( <div> <Button>Click me</Button> </div> ); } ``` 上述代码中，`Button`组件使用了styled-components库来定义CSS样式，样式代码被包含在模板字符串中，以反引号（``）开头和结尾。在`MyComponent`组件中，我们可以像使用普通的`<button>`元素一样使用`<Button>`组件，并且样式将自动应用到该组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值