css样式规则书写,css书写规范

css样式的基本规则是什么？

1、选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。

创新互联建站制作网站网页找三站合一网站制作公司,专注于网页设计,成都做网站、网站制作,网站设计,企业网站搭建,网站开发,建网站业务,680元做网站,已为1000+服务,创新互联建站网站建设将一如既往的为我们的客户提供最优质的网站建设、网络营销推广服务!

2、属性和属性值以“键值对“ 的形式出现。

3、属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。

4、属性和属性值之间用英文“:“连接。

5、多个“键值对”之间用英文“;”进行区分。可以用段落和表格的对齐的演示。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

扩展资料：

CSS作为一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。

无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。

css样式怎么写

css样式是HTML的一个补充，简单的css使用样式如下:

html

body

div id=div/div

/body

style type="text/css"

width:300px;//设置div的宽度300像素

height:500px;//设置div高度500像素

background-color:red;//设置div的背景颜色为红色

/style

/html

css代码位于style之间，详细的css代码解释见代码注释。

CSS编写时标准的格式规范是什么样的？

CSS用的是类C#语言的标准。

书写方法自由灵活，没有一定的局限。但是常期以来为了阅读和维护等方面的经验，一般都是这样的格式：

标名 {

属性：属性值;

属性：属性值；

}

当然这样大家都能理解，你自己也好维护，没有什么特殊的要求的！

为了便于阅读有人建议，CSS分为以下方面的控制：

先写位置等：

如：position:absolute;

top,left，width,height等,

空一行，再写布局方面的，如：margin,padding等；

空一行，写字体格式：如line-height等

再空一行，写字体相关！如：font-size,font-color等；

最后是其他的属性！

但一般情况下，我们还是没有必要写那么多的属性值对的！所以就很少有人去空行做这些东西了！

但是一般内容较少时，可以直接写在一行，并不影响阅读的！

纠正一点的是：CSS文件进行调用时并不像一楼所说！不换行可以减少代码的大小！这是毫无根据的臆断！因其会自动解释换行和空白的！代码的大小是因为我们写了一些没有必要的东西所形成的时空代价，比如在body中已经有font-size:9pt;而在BODY中的一个DIV中，如果要设置字体为9pt时没有必要再定义font-size:9pt了，如果再定义就是出现代码时的增大。还有一些默认也没有必要写出。

如果真如一楼所说，我想问一下一楼：你知道吗，在CSS中是可以加注释的，请问注释会不会增加代码量？答案是不会！因为其不运行！

sorry,对不起楼上，我说的是运行方面的，没有说下载方面的事。恕我直言，如果有一个人一个不足0。2K的CSS而写了N个GB的注释的话，那他一定有病了！注释不是发文章，一个CSS文件最多能有多少注释？不过我经常遇到写好的CSS进行压缩加密的情况，为了防止别人偷看，至于说能有多少，一个回车只是一个字符，占8bits,一个byte,请问一下，连写与其能有多大分别？再者请问一下为什么还要分开写呢？这是代码的维护时很难读懂的情况下还要讲时间代价吗？

程序的时空代价是指：运行时间与编写时间的相比，存储空间与运行空间的对比。

对于离散型网页来说，下载页面的同时还在下载CSS文件，而且CSS会放在机器的临时文件夹中，这样，整个网站也用不了下载几个CSS，且下次打开网页不须再下CSS。这样你认为呢？

css编写基本原则正确的是什么？

1、基本样式 的写法

style type="text/css"

h1{

font-family:黑体;

}

/style

直接些标签名进行定义属性，这个也比较常见。但是它的定义通常放在style标签中声明。

2、类class链接样式

定义也通常在style标签中声明

style type="text/css"

.style1{

color:red;

font-size:16px;

}

/style

引用时候直接在标签的属性中使用class="style1" 记住是class属性

h1 /h1

3、id链接样式

style type="text/css"

#style1{

color:blue;

font-size:16px;

}

/style

引用的时候就用标签属性中的id属性 ，要区别于类属性

h1 id="style1"/h1

区别：类class链接样式和id链接样式

类连接样式可以适用于多个对象设置同样的属性中，

而id链接样式只能用于一个对象标签中，其他标签则会失效

4、html选择器：

直接用标签进行声明，跟上面的第一个一样

2）派生选择器：

style type="text/css"

h1 h2{

color:red;

font-size:1em;

font-family:黑体;

}

/style

h1 h2的写法意思是代表着该css样式只能之h1h2 /h2/h1同时出现，且是嵌套使用的时候才能生效

3）id选择器

id选择器的作用是通过id选择器将css样式作用到页面的对象上。写法：

style type="text/css"

#text p{

font-size:1em;

}

/style

将该样式绑定到html上，就要这样写

h1 id=#"text"这个是不要p的写法

要p的写法

表明该对象只能作用在text对象上的所有p标签中

4）class选择器

style type="text/css"

.fancy{

color:red;

background:#666;

}

/style

使用的时候也是

h1/h1

也可以像上面的一样用派生选择器

style type="text/css"

.fancy td{

color:red;

background:#666;

}

/style

说明生效只能在td中

5）分组选择器

h1{color:bule;}

#text{color:bule;}

.play{color:bule;}

这种写法太繁琐了

我们可以使用

h1,#text,.paly{

color:bule;}

这样来定义

6）伪类和伪类选择器

用关键字:lang来定义

html

head

style type="text/css"

q:lang(smile){

quotes:"∞"

}

/style

/head

body

好吧，展示一下

p请看q祝你愉快/q/p

/body

/html

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

模块 module.css

基本共用 base.css

布局、版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css