CSS

  1. 标签样式:指把CSS样式像属性一样写在标签标记内
    <p style="color:red"></p>
  2. 内部样式:把CSS样式单独的包含在头部标签内
    <head><title></title>
    <style type="text/css">
    p{ color:red}
    body{color:blue}
    </style>
    </head>
  3. 外部样式:在网页内链接外部样式表文件
    先建立一个样式表文件如web.css,那么在网页中调用方式为
    <html><head><title></titel>
    <link rel="stylesheet" type="text/css" href="web.css"/>

CSS选择器、属性、值,这些是基本语法,如果HTML的标签、属性、值相似。任何的HTML标签。
一、HTML标签选择器:即选择器名称本身就是任何的HTML标签。定义这种样式,在使用时只要HTML链接上样式,HTML各对应标签会自动应用各种属性。
如:body{
              color:red;
               font-size:8em;
              }
上例中body就是选择器,属性和值是在大括号中,属性和值用":"分隔开,属性之间用";"分隔开

 

自定义类:就是允许我们自已命名一个选择器,而不是用HTML标签,这样比较自由些,可以给我们想应用样式的应用。语法如下:
.intro {
    color: red;
    font-weight: bold;
}
调用方法:<p class=intro></p>
自定义类选择器是以"."开头的,名字自定。

ID选择器:也是可以自定义名称,但在定义前面加上#即可,在HTML中调用的话,只需给标签加个ID属性,属性值为自定义CSS名即可
如:
#top {
    background-color: #ccc;
    padding: 1em
        }
调用方法:<div id="top">

idclass的不同指出在于一个页面同一个ID只能只有一次,而class可以无限制使用。

id你只能用来定义单一元素,定义二个以后。页面不会出现什么问题,但是W3检测的时候认为你页面不符合标准;
单一使用的样式用id或者需要程序、js动态控制的样式用id.
class
是类,同一个class可以定义多个元素。就页面效果而言,两个东西的视觉效果几乎无差别。

重复使用的元素、类别,用class定义

一、在web标准中是不容许重复ID的,例如 div id="a"  不容许重复2次;而class所定义的是类,理论上可以无限重复。以根据需要多次引用。
二、属性的优先级问题:ID 的优先级要高于class
三、方便JS等客户端脚本的引用,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单与快捷。

 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
06-02
CSS(Cascading Style Sheets)是一种用于描述网页样式和排版的语言。通过 CSS,我们可以将网页内容和样式分离开来,从而使得网页的结构和样式更加清晰易于维护。 CSS 由三个部分组成: 1. 选择器(Selector):用于指定要应用样式的 HTML 元素。 2. 属性(Property):用于指定要修改的样式属性,例如颜色、大小、边框等。 3. 值(Value):用于指定修改后的样式属性值,例如红色、16 像素、实线边框等。 CSS 的样式可以写在 HTML 文档的 `<head>` 标签中,也可以单独存储在一个 CSS 文件中,并通过 `<link>` 标签引用。例如: ```html <!DOCTYPE html> <html> <head> <title>My Website</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>Welcome to my website!</h1> <p>This is a paragraph.</p> </body> </html> ``` 上述代码中,我们通过 `<link>` 标签引用了一个名为 `styles.css` 的外部样式表文件。该文件中可以包含一系列 CSS 样式,例如: ```css h1 { color: red; font-size: 24px; } p { color: blue; font-size: 16px; } ``` 上述代码中,我们定义了两个样式,一个用于 `<h1>` 标签,一个用于 `<p>` 标签。其中,`color` 属性用于设置文字颜色,`font-size` 属性用于设置文字大小。 这样,当用户访问我们的网页时,浏览器会自动加载 `styles.css` 文件,并将其中的样式应用到网页中的相应元素上。这样,我们就可以通过 CSS 来控制网页的样式和排版。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值