搜索
您的当前位置:首页正文

css的多种书写方式

2023-11-28 来源:谷彼宠物网

这次给大家带来css的多种书写方式,css书写方式的注意事项有哪些,下面就是实战案例,一起来看一下。

优先级: 外部样式 < 内部样式表 < 内联样式表;

优先级,即:同名的选择器右边的会覆盖左边

1.内部样式表

CSS Code复制内容到剪贴板

  1. <head>

  2. <style>

  3. /*内部样式表,一般用于覆盖公用样式*/

  4. #headTip {

  5. color: 0xff5;

  6. }

  7. </style>

  8. </head>

2.使用link标签,在文档中声明使用外接资源,最常用的一种方式。

css外部样式表指定编码的@CHARSET="utf-8"; 需要放在第一行。

XML/HTML Code复制内容到剪贴板

  1. <head>

  2. <link href="./my-common.css" rel="stylesheet" media="screen" type="text/css"/>

  3. </head>

3.@方式,引入css,注意这个是异步加载的,在整个html加载之后才加载,会导致页面闪烁。不推荐使用。

CSS Code复制内容到剪贴板

  1. <head>

  2. <style>

  3. @import 'my-common.css';

  4. </style>

  5. </head>

4.内联样式表,优先级最高最直白,但不能复用不容易维护。

XML/HTML Code复制内容到剪贴板

  1. <body>

  2. <input type="text" style="color:0x550;font-size:30px;"/>

  3. </body>

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

三种绝对定位元素的水平垂直居中的办法

瀑布流布局与无限加载图片相册效果

小编还为您整理了以下内容,可能对您也有帮助:

HTML样式CSS的三种写法

CSS是样式层叠表,有三种引入方式。下面,我们来看看HTML样式CSS的三种写法吧。

行内样式

CSS可以直接放到行内样式中引入即可,比如代码如下图:

<p style="color: blue; background: red;">

hello world!

</p>

嵌入式

还可以采用潜入方式引入CSS,就是把CSS写到<style>标签中,这种方式比较实用,如下图所示:

<style type="text/css">

h1 {color: red;}

</style>

<h1>helloworld</h1>

外部样式表

还有一种叫做外部样式,也就是把CSS写在另外一张页面上,然后再引用到指定页面就可以了,这种也很常见。

@import url(main.css);

关于CSS的写法,怎样来写的?

本篇文章给大家带来的内容是关于css书写规范的详细讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1、书写顺序

根据属性的重要性按顺序书写

只遵循横向顺序即可,先显示定位布局类属性,后盒模型等自身属性,最后是文本类及修饰类属性。

→→→显示属性自身属性文本属性和其他修饰
displaywidthfont
visibilityheighttext-align
positionmargintext-decoration
floatpaddingvertical-align
clearborderwhite-space
list-styleoverflowcolor
topmin-widthbackground

1.位置属性

(position, top, right, z-index, display, float等)

2.大小

(width, height, padding, margin)

3.文字系列

(font, line-height, letter-spacing, color- text-align等)  

4.背景

(background, border等)

5.其他

(animation, transition等)

2、选择器等级

a = 行内样式style。b = ID选择器的数量。c = 类、伪类和属性选择器的数量。d = 类型选择器和伪元素选择器的数量。
选择器等级(a,b,c,d)
style=””1,0,0,0
#wrapper #content {}0,2,0,0
#content .dateposted {}0,1,1,0
p#content {}0,1,0,1
#content p {}0,1,0,1
#content {}0,1,0,0
p.comment .dateposted {}0,0,2,1
p.comment p {}0,0,1,2
.comment p {}0,0,1,1
p.comment {}0,0,1,1
.comment {}0,0,1,0
p p {}0,0,0,2
p {}0,0,0,1

3、书写规范、缩写属性

属性缩写

去掉小数点前的0

简写命名,但前提是要让人看懂你的简写

16进制颜色代码缩写

连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。2.不建议使用“_”下划线来命名CSS选择器,为什么呢?输入的时候少按一个shift键;浏览器兼容问题 (比如使用*tips的选择器命名,在IE6是无效的)能良好区分JavaScript变量命名(JS变量命名是用“*”)

不要轻易使用id

id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。

为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。

image

4、 命名规范

1 布局文档 doc doc头部 head hd主体 body bd尾部 foot ft主栏 main mn主栏子容器 mainc mnc侧栏 side sd侧栏子容器 sidec sdc盒容器 wrap/box wrap/box导航 nav nav2 模块子导航 subnav snav面包屑 crumb crm菜单 menu menu选项卡 tab tab标题区 head/title hd/tt内容区 body/content bd/ct列表 list lst表格 table tb表单 form fm热点 hot hot排行 top top登录 login log标志 logo logo广告 advertise ad搜索 search sch幻灯 slide sld提示 tips tips帮助 help help新闻 news news下载 download dld注册 regist reg投票 vote vote版权 copyright cprt结果 result rst标题 title tt按钮 button btn输入 input ipt3 功能浮动清除 clearboth cb向左浮动 floatleft fl向右浮动 floatright fr内联块级 inlineblock ib文本居中 textaligncenter tac文本居右 textalignright tar文本居左 textalignleft tal垂直居中 verticalalignmiddle vam溢出隐藏 overflowhidden oh完全消失 displaynone dn字体大小 fontsize fs字体粗细 fontweight fw4 皮肤字体颜色 fontcolor fc背景 background bg背景颜色 backgroundcolor bgc背景图片 backgroundimage bgi背景定位 backgroundposition bgp边框颜色 bordercolor bdc5 状态选中 selected sel当前 current crt显示 show show隐藏 hide hide打开 open open关闭 close close出错 error err不可用 disabled dis

1、class

头:header  内容:content/container  尾:footer  导航:nav  侧栏:sidebar  栏目:column  页面外围控制整体佈局宽度:wrapper  左右中:left right center  登录条:loginbar  标志:logo  广告:banner  页面主体:main  热点:hot  新闻:news  下载:download  子导航:subnav  菜单:menu  子菜单:submenu  搜索:search  友情链接:friendlink  页脚:footer  版权:copyright  滚动:scroll  内容:content  标签:tags  文章列表:list  提示信息:msg  小技巧:tips  栏目标题:title  加入:joinus  指南:guide  服务:service  注册:regsiter  状态:status  投票:vote  合作伙伴:partner

2、id

(1)页面结构   容器: container   页头:header   内容:content/container   页面主体:main   页尾:footer   导航:nav   侧栏:sidebar  栏目:column   页面外围控制整体佈局宽度:wrapper   左右中:left right center(2)导航   导航:nav   主导航:mainnav   子导航:subnav   顶导航:topnav   边导航:sidebar   左导航:leftsidebar   右导航:rightsidebar   菜单:menu   子菜单:submenu   标题: title   摘要: summary(3)功能   标志:logo   广告:banner   登陆:login   登录条:loginbar   注册:register   搜索:search   功能区:shop   标题:title   加入:joinus   状态:status   按钮:btn   滚动:scroll   标籤页:tab   文章列表:list   提示信息:msg   当前的: current   小技巧:tips   图标: icon   注释:note   指南:guild   服务:service   热点:hot   新闻:news   下载:download   投票:vote   合作伙伴:partner   友情链接:link   版权:copyright

3、文件

 主要的 master.css   模块 module.css   基本共用 base.css   布局、版面 layout.css   主题 themes.css   专栏 columns.css   文字 font.css   表单 forms.css   补丁 mend.css   打印 print.css

5、注意事项

/* Header */  内容区  /* End Header */
 1.一律小写;   2.尽量用英文;   3.不加中槓和下划线;   4.尽量不缩写,除非一看就明白的单词。

关于CSS的写法,怎样来写的?

本篇文章给大家带来的内容是关于css书写规范的详细讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1、书写顺序

根据属性的重要性按顺序书写

只遵循横向顺序即可,先显示定位布局类属性,后盒模型等自身属性,最后是文本类及修饰类属性。

→→→显示属性自身属性文本属性和其他修饰
displaywidthfont
visibilityheighttext-align
positionmargintext-decoration
floatpaddingvertical-align
clearborderwhite-space
list-styleoverflowcolor
topmin-widthbackground

1.位置属性

(position, top, right, z-index, display, float等)

2.大小

(width, height, padding, margin)

3.文字系列

(font, line-height, letter-spacing, color- text-align等)  

4.背景

(background, border等)

5.其他

(animation, transition等)

2、选择器等级

a = 行内样式style。b = ID选择器的数量。c = 类、伪类和属性选择器的数量。d = 类型选择器和伪元素选择器的数量。
选择器等级(a,b,c,d)
style=””1,0,0,0
#wrapper #content {}0,2,0,0
#content .dateposted {}0,1,1,0
p#content {}0,1,0,1
#content p {}0,1,0,1
#content {}0,1,0,0
p.comment .dateposted {}0,0,2,1
p.comment p {}0,0,1,2
.comment p {}0,0,1,1
p.comment {}0,0,1,1
.comment {}0,0,1,0
p p {}0,0,0,2
p {}0,0,0,1

3、书写规范、缩写属性

属性缩写

去掉小数点前的0

简写命名,但前提是要让人看懂你的简写

16进制颜色代码缩写

连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。2.不建议使用“_”下划线来命名CSS选择器,为什么呢?输入的时候少按一个shift键;浏览器兼容问题 (比如使用*tips的选择器命名,在IE6是无效的)能良好区分JavaScript变量命名(JS变量命名是用“*”)

不要轻易使用id

id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。

为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。

image

4、 命名规范

1 布局文档 doc doc头部 head hd主体 body bd尾部 foot ft主栏 main mn主栏子容器 mainc mnc侧栏 side sd侧栏子容器 sidec sdc盒容器 wrap/box wrap/box导航 nav nav2 模块子导航 subnav snav面包屑 crumb crm菜单 menu menu选项卡 tab tab标题区 head/title hd/tt内容区 body/content bd/ct列表 list lst表格 table tb表单 form fm热点 hot hot排行 top top登录 login log标志 logo logo广告 advertise ad搜索 search sch幻灯 slide sld提示 tips tips帮助 help help新闻 news news下载 download dld注册 regist reg投票 vote vote版权 copyright cprt结果 result rst标题 title tt按钮 button btn输入 input ipt3 功能浮动清除 clearboth cb向左浮动 floatleft fl向右浮动 floatright fr内联块级 inlineblock ib文本居中 textaligncenter tac文本居右 textalignright tar文本居左 textalignleft tal垂直居中 verticalalignmiddle vam溢出隐藏 overflowhidden oh完全消失 displaynone dn字体大小 fontsize fs字体粗细 fontweight fw4 皮肤字体颜色 fontcolor fc背景 background bg背景颜色 backgroundcolor bgc背景图片 backgroundimage bgi背景定位 backgroundposition bgp边框颜色 bordercolor bdc5 状态选中 selected sel当前 current crt显示 show show隐藏 hide hide打开 open open关闭 close close出错 error err不可用 disabled dis

1、class

头:header  内容:content/container  尾:footer  导航:nav  侧栏:sidebar  栏目:column  页面外围控制整体佈局宽度:wrapper  左右中:left right center  登录条:loginbar  标志:logo  广告:banner  页面主体:main  热点:hot  新闻:news  下载:download  子导航:subnav  菜单:menu  子菜单:submenu  搜索:search  友情链接:friendlink  页脚:footer  版权:copyright  滚动:scroll  内容:content  标签:tags  文章列表:list  提示信息:msg  小技巧:tips  栏目标题:title  加入:joinus  指南:guide  服务:service  注册:regsiter  状态:status  投票:vote  合作伙伴:partner

2、id

(1)页面结构   容器: container   页头:header   内容:content/container   页面主体:main   页尾:footer   导航:nav   侧栏:sidebar  栏目:column   页面外围控制整体佈局宽度:wrapper   左右中:left right center(2)导航   导航:nav   主导航:mainnav   子导航:subnav   顶导航:topnav   边导航:sidebar   左导航:leftsidebar   右导航:rightsidebar   菜单:menu   子菜单:submenu   标题: title   摘要: summary(3)功能   标志:logo   广告:banner   登陆:login   登录条:loginbar   注册:register   搜索:search   功能区:shop   标题:title   加入:joinus   状态:status   按钮:btn   滚动:scroll   标籤页:tab   文章列表:list   提示信息:msg   当前的: current   小技巧:tips   图标: icon   注释:note   指南:guild   服务:service   热点:hot   新闻:news   下载:download   投票:vote   合作伙伴:partner   友情链接:link   版权:copyright

3、文件

 主要的 master.css   模块 module.css   基本共用 base.css   布局、版面 layout.css   主题 themes.css   专栏 columns.css   文字 font.css   表单 forms.css   补丁 mend.css   打印 print.css

5、注意事项

/* Header */  内容区  /* End Header */
 1.一律小写;   2.尽量用英文;   3.不加中槓和下划线;   4.尽量不缩写,除非一看就明白的单词。

HTML样式CSS的三种写法?

1、首先,在电脑中打开编辑器,创建html文档。

2、然后,创建h1标签,用行内样式控制字体颜色为红色。

3、接下来,用内部样式选择器选择h1标签,控制它的样式。

4、外部样式需要,创建外部样式.css文件。

5、然后,在html文件里面引入css文件。

6、最后,在浏览器看是否生效,就可以了。

扩展资料:

将它们列在此的目的,是想使网页制作者了解浏览器处理HTML的行为是如何使用CSS1规则重新生成的,至少也是大概了解的。彻底地理解这个样式表是理解CSSI如何操作的第一步。

Web前端面试指导(五十):CSS样式书写有哪些

一、CSS书写顺序

1.位置属性(position, top, right,z-index, display, float等)

2.大小(width, height, padding,margin)

3.文字系列(font, line-height,letter-spacing, color- text-align等)

4.背景(background, border等)

5.其他(animation, transition等)

二、CSS书写规范

1.使用CSS缩写属性

CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。

2.去掉小数点前的“0”

3.简写命名

很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!

4.16进制颜色代码缩写

有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。

5连字符CSS选择器命名规范

1)长名称或词组可以使用中横线来为选择器命名。

2)不建议使用“_”下划线来命名CSS选择器,为什么呢?

输入的时候少按一个shift键;浏览器兼容问题(比如使用_tips的选择器命名,在IE6是无效的)能良好区分JavaScript变量命名(JS变量命名是用“_”)

6.不要随意使用id

id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。

7.为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。

三、CSS命名规范

常用的CSS命名规则

头:header

内容:content/Container

尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中:left right center

登录条:loginbar

标志:logo

广告:banner

页面主体:main

热点:hot

新闻:news

下载:download

子导航:subnav

菜单:menu

子菜单:submenu

搜索:search

友情链接:friendlink

页脚:footer

版权:copyright

滚动:scroll

内容:content

标签:tags

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guide

服务:service

注册:regsiter

状态:status

投票:vote

合作伙伴:partner

ID的命名-页面结构

容器: container

页头:header

内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中:left right center

ID的命名-导航

导航:nav

主导航:mainnav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu

子菜单:submenu

标题: title

摘要: summary

ID的命名-功能

标志:logo

广告:banner

登陆:login

登录条:loginbar

注册:register

搜索:search

功能区:shop

标题:title

加入:joinus

状态:status

按钮:btn

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

当前的: current

小技巧:tips

图标: icon

注释:note

指南:guild

服务:service

热点:hot

新闻:news

下载:download

投票:vote

合作伙伴:partner

友情链接:link

版权:copyright

四、注释规范

/* Header */

内容区

/* End Header */

五、注意事项

1.一律小写;

2.尽量用英文;

3.尽量不缩写,除非一看就明白的单词。

六、CSS样式表文件命名

主要的 master.css

模块 mole.css

基本共用 base.css

布局、版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

谷彼宠物网还为您提供以下相关内容希望对您有帮助:

HTML样式CSS的三种写法

行内样式 CSS可以直接放到行内样式中引入即可,比如代码如下图: hello world! 嵌入式 还可以采用潜入方式引入CSS,就是把CSS写到标签中,这种方式比较实用,如下图所示: h1 {color: red;} ...

css有哪几种类型?

CSS(Cascading Style Sheets)有三种类型:内部样式、外部样式和内联样式。1. 内部样式:内部样式是写在HTML文件内部的样式,可以使用``标签来定义。内部样式只对当前HTML文件中的元素有效,如果需要在同一网站的多个HTML文件中...

关于CSS的写法,怎样来写的?

href导入css文件路径 注:一个HTML文件可以导入多个CSS外部样式表 2)@import url(CSS文件路径以及文件全称);link和import导入外部样式的区别:差别1:本质的差别:link属于XHTML标签,而@import完全是CSS提供的一种方式。差别2...

Web前端面试指导(五十):CSS样式书写有哪些

2.大小(width, height, padding,margin)3.文字系列(font, line-height,letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation, transition等)二、CSS书写规范 1.使用CSS缩写属性 CSS有些属...

引用外部css文件有几种写法?

目前有两种引用方式,一种是通过在head里面的link来引用,另外一种是直接通过import来引用,示例代码如下:第一种:link引用 第二种:@import引用 @import url(/css/mycss.css)&lt;/stylelink和import语法结构不同,前者是ht...

css规范写法

.class{样式1:样式1;样式2:样式2;样式3:样式3;样式4:样式4;} border、margin、padding这些可以缩写的标签尽量缩写。第一种样式写出来样式表会比较小,基本没有多余代码,但是对于修改会比较麻烦一点,第二种方式有比较多...

css怎么写

&lt;STYLE type="text/css"&gt; 选择符 { 样式属性:取值;样式属性:取值;...} &lt;/STYLE&gt; 外部样式表 写好了样式之后保存为后缀.css的文件 再在你要引用的HTML文件的&lt;HEAD&gt;&lt;/HEAD&gt;标签内写上引用语句 &lt;LINK rel="...

css排版样式有哪几种类型

css是英文Cascading Style Sheets的缩写。它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。它包含3种类型,内部样式,行内样式和外部样式表三种 作用的效果是...

HTML样式CSS的三种写法?

1、首先,在电脑中打开编辑器,创建html文档。2、然后,创建h1标签,用行内样式控制字体颜色为红色。3、接下来,用内部样式选择器选择h1标签,控制它的样式。4、外部样式需要,创建外部样式.css文件。5、然后,在html文件...

CSS样式表在网页上有哪几种存在方式?

CSS样式 1、行内样式 2、嵌入式 3、链接式 超链接分类:1、link:普通链接 2、hover:鼠标停靠时的链接 3、visited:访问过的链接 4、active:

Top