css目标规则命名怎么弄?

116 2025-01-06 12:40

一、css目标规则命名怎么弄?

CSS命名可分ID命名和class命名。

ID命名规则:"#+元素名称";

class命名规则:".+元素名称";

但ID命名多用于JS,下面提供网页设计常用命名

二、css规则定义?

基本语法

规则

选择符

任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如,

P { text-indent: 3em }

当中的选择符是P。

类选择符

单一个选择符能有不同的CLASS(类),因而允许同一元素有不同样式。例如,一个网页制作者也许希望视其语言而定,用不同的颜色显示代码 :

code.html { color: #191970 }

code.css { color: #4b0082 }

以上的例子建立了两个类,css和html,供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类,例如,

<P CLASS=warning>每个选择符只允许有一个类。

例如,code.html.proprietary是无效的。</p>

类的声明也可以无须相关的元素:

.note { font-size: small }

在这个例子,名为note的类可以被用于任何元素。

一个良好的习惯是在命名类的时候,根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small,但如果网页制作者决定改变这个类的样式,使得它不再是小字体的话,那么这个名字就变得毫无意义了。

ID 选择符

ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用,因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如,ID选择符可以指定如下:

#svp94O { text-indent: 3em }

这点可以参考HTML中的ID属性:

<P ID=svp94O>文本缩进3em</P>

关联选择符

关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性,而且因为层叠顺序的规则,它们的优先权比单一的选择符大。例如, 以下的上下文选择符

P EM { background: yellow }

是P EM。这个值表示段落中的强调文本会是黄色背景;而标题的强调文本则不受影响。

声明

属性

一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。

声明的值是一个属性接受的指定。例如,属性颜色能接受值red。

组合

为了减少样式表的重复声明,组合的选择符声明是允许的。例如,文档中所有的标题可以通过组合给出相同的声明:

H1, H2, H3, H4, H5, H6 {

color: red;

font-family: sans-serif }

继承

实际上,所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值,除非另外更改。例如,一个BODY定义了的颜色>值也会应用到段落的文本中。

有些情况是内部选择符不继承周围的选择符的值,但理论上这些都是特殊的。例如,上边界属性是不会继承的;直觉上,一个段落不会有同文档BODY一样的上边界值。

注解

样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS1注解的例子如以下格式:

/* COMMENTS CANNOT BE NESTED */

伪类和伪元素

伪类和伪元素是特殊的类和元素,能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如,visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分,例如段落的第一个字母。

伪类或伪元素规则的形式如

选择符:伪类 { 属性: 值 }

选择符:伪元素 { 属性: 值 }

伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用,如下:

选择符.类: 伪类 { 属性: 值 }

选择符.类: 伪元素 { 属性: 值 }

定位锚伪类

伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示,甚至不同字体大小和风格。

一个有趣的效果是使当前(或“可激活”)连接以不同颜色、更大的字体显示。然后,当网页的已访问连接被重选时,又以不同颜色、更小字体显示。这个样式表的示例如下:

A:link { color: red }

A:active { color: blue; font-size: 125% }

A:visited { color: green; font-size: 85% }

首行伪元素

通常在报纸上的文章,例如Wall Street Journal中的,文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能,将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:

P:first-line {

font-variant: small-caps;

font-weight: bold }

三、jquery设置css规则?

//jquery 不支持这种写法background-color改成:backgroundColor //$()里的选择器是要加上引号的 //例子: $("#id").css("backgroundColor","none")

四、css规则使用步骤?

css的用法:

外部式:

(1)用法:当要在站点上所有或部分网页上一致地应用相同样式时,可使用外部样式表。在一个或多个外部样式表中定义样式,并将它们链接到所有网页,便能确保所有网页外观的一致性。如果人们决定更改样式,只需在外部样式表中修改一次,而该更改会反映到所有与该样式表相链接的网页上。

(2)举例:通常外部样式表以 .css 做为文件扩展名,例如 Mystyles.css。然后在需要此样式的页面中将其链接进来。

内嵌式:

(1)用法:当人们只是要定义当前网页的样式,可使用嵌入的样式表。嵌入的样式表是一种级联样式表,“嵌”在网页的 标记符内。嵌入的样式表中的样式只能在同一网页上使用。

(2)举例:在 MicrosoftFrontPage2000中,某些格式设置特性会作为内嵌样式自动应用。例如∶如果使用 “边框与阴影” 命令(在 “格式” 菜单上)在普通段落周围应用框,FrontPage 会写下格式设置信息,作为段落标记符的内嵌样式属性。

行内样式:

行内样式就是直接把CSS代码添加到HTML的标记中,即作为HTML标记的属性标记存在。通过这种方法,可以很简单地对某个元素单独定义样式。

五、网页设计css规则属性

< lang="zh-CN"> 网页设计中的CSS规则属性

网页设计中的CSS规则属性

在网页设计中,CSS规则属性扮演着至关重要的角色。CSS(层叠样式表)是一种样式表语言,用于描述网页的呈现方式。通过合理应用CSS规则属性,设计师可以实现对网页布局、样式和交互的精确控制。本文将探讨一些常用的CSS规则属性,以帮助您更好地设计网页。

选择器

在CSS中,选择器用于选择要应用样式的元素。常见的选择器包括:

  • 类选择器: 使用"."开头,用于选择具有相同类的元素。
  • ID选择器: 使用"#"开头,用于选择具有特定ID的元素。
  • 元素选择器: 用于选择指定类型的元素,如p、h1等。

尺寸属性

在网页设计中,控制元素的尺寸是非常重要的。以下是一些常用的尺寸属性:

  • width: 控制元素的宽度。
  • height: 控制元素的高度。
  • margin: 控制元素与其它元素之间的间距。
  • padding: 控制元素的内边距。

文本属性

文本是网页设计中不可或缺的部分,以下是一些常用的文本属性:

  • color: 控制文本的颜色。
  • font-size: 控制文本的大小。
  • font-family: 控制文本的字体。
  • line-height: 控制文本的行高。

背景属性

背景是网页设计中赋予元素特殊外观的重要因素,以下是一些常用的背景属性:

  • background-color: 控制元素的背景颜色。
  • background-image: 控制元素的背景图片。
  • background-position: 控制背景图片的位置。

定位属性

在网页设计中,控制元素在页面中的位置和排列是至关重要的,以下是一些常用的定位属性:

  • position: 控制元素的定位方式。
  • top: 控制元素与顶部的距离。
  • left: 控制元素与左侧的距离。

盒模型

盒模型是CSS中一个重要的概念,它描述了元素在页面上所占空间的方式。盒模型包括:

  • content: 元素的内容区域。
  • padding: 内边距,围绕内容区域。
  • border: 边框,围绕内边距区域。
  • margin: 外边距,围绕边框区域。

动画属性

动画是网页设计中增加交互和吸引力的重要元素,以下是一些常用的动画属性:

  • animation: 创建动画效果。
  • transition: 控制元素的过渡效果。
  • transform: 控制元素的变换效果。

总结

通过合理应用以上介绍的CSS规则属性,设计师可以实现更加精美、动态的网页设计效果。不断学习和实践CSS规则属性的运用,将有助于提升您的网页设计技能,为用户提供更好的浏览体验。

六、css.的命名规则?

一、网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率。

所有的命名最好都小写

属性的值一定要用双引号("")括起来,且一定要有值如class="divcss",id="divcss"

每个标签都要有开始和结束,且要有正确的层次,排版有规律工整

空元素要有结束的tag或于开始的tag后加上"/"

表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等

<h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。

给每一个表格和表单加上一个唯一的、结构标记id

给图片加上alt标签

尽量使用英文命名原则

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

二、相对网页外层重要部分CSS样式命名:

外套 wrap ----------------用于最外层

头部 header --------------用于头部

主要内容 main ------------用于主体内容(中部)

左侧 main-left ------------左侧布局

右侧 main-right -----------右侧布局

导航条 nav -----------------网页菜单导航条

内容 content ---------------用于网页中部主体

底部 footer -----------------用于底部

DIV+CSS命名小结:

无论是使用“.”(小写句号)选择符号开头命名,还是使用“#”(井号)选择符号开头命名都无所谓,但我们最好遵循。

主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名,同时考虑命名的CSS选择器在HTML中重复使用调用。

通常我们最常用主要命名有:

wrap(外套、最外层)、header(页眉、头部)、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)

、content (内容区)、footer(页脚、底部)、logo(标志、可以配合h1标签使用)、banner(广告条,一般在顶部)、copyRight(版权)。

七、dw2020新建css规则?

1.首先,新建一个HTML文档,这里以Div css布局为例。

2.点击插入菜单下的“Div(D)”,弹出对话框。

3.点击“新建css规则”,定义一个选择器,“确定”完成。

4.设置大小及背景颜色,“确定”完成。

八、css怎么使用id规则遍历?

html的id属性可以在文档中的任何位置被使用,但必须要遵循一些规则:

1、id属性的值必须是以字母(az或AZ)开头,例:

<p id="p">测试文字</p>

<p id="A">测试文字</p>

说明:id属性的值是大小写敏感的

2、后续字符可以是字母,数字(0-9),连字符( - ),下划线(_)

<p id="pa">测试文字</p>

<p id="A1">测试文字</p>

<p id="p-a">测试文字</p>

<p id="A_1">测试文字</p>

3、每个id属性值在文档中必须是唯一的

这样就可以方便我们通过这个id属性值来确定了Web站点的唯一元素,就可以使用css或者js来操作这个唯一元素,例:设置元素样式、修改元素中包含的内容等等。

九、css规则靠什么分离文本?

css规则靠import,link这两个关键字分离文本。

因为import和link这两个关键字在html文件里面指的都是引入第三方的文件的,这个在现在的前端开发模式里面是非常有用的,将html代码和css代码分离开来然后使用import关键字引入,呈现css的样式列表的。

十、css元素的排列规则主要分为?

1、代表内联样式,如: style=””,权值为1000。

2、代表ID选择器,如:#content,权值为100。

3、代表类,伪类和属性选择器,如.content,权值为10。

4、代表类型(元素)选择器和伪元素选择器,如div p,权值为1。 按照CSS代码的执行先后顺序。如果有重复的规则,按照后执行的定义。最终规则是多个定义规则的综合。重点:高级规则定义对于不同表格的文字样式定义。(不同表格使用不同ID、使用类样式定义)一页中的多种超级链接样式定义。多个相同规则不同对象的CSS共同定义。对于同一对象定义的多种CSS方式考虑哪种更科学。

顶一下
(0)
0%
踩一下
(0)
0%
相关评论
我要评论
点击我更换图片