css目的-CSS 基础知识

2023-12-04 0 602 百度已收录

样式表

内部样式表

嵌入样式就是将CSS代码写在HTML文档的head-back标签中,并用style标签进行定义。 其基本句型如下:

<head>
<style type="text/CSS"><span class="token style language-css">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

总结:

在语法上,style标签通常位于head标签中的title标签之后,但它也可以放置在HTML文档中的任何位置。 type="text/CSS" 在html5中可以省略

内联样式(inline style)

基本句子格式如下:

内容

外部样式表(外部链接类型)

链接方法将所有样式放置在一个或多个扩展名为.CSS 的外部样式表文件中,并通过link 标记将外部样式表文件链接到HTML 文档。 基本句子格式如下: 注:link是单个标签。 在这个句型中,需要将link标签放在head的back标签中,并且必须指定link标签的三个属性,如下: href:定义链接的外部样式表文件的URL,可以是相对路径或绝对路径。 。 type:定义链接文档的类型,这里需要指定为“text/CSS”,表示链接的外部文件是CSS样式表。 rel:定义当前文档和链接文档之间的关系。 这里需要指定为“stylesheet”,表示链接的文档是样式表文件。 CSS 字体样式属性

font-size:字体大小单位通常使用像素px

font-family:Font可以同时指定多种字体,用冒号分隔,这意味着如果浏览器不支持第一种字体,就会尝试下一种,直到找到合适的字体。

font-weight:字体粗细及其可用属性值:

正常、加粗、加粗、加粗、100~900(100的整数倍)。

字体样式:字体样式

font-style属性用于定义字体样式,例如设置斜体、斜体或普通字体。 其可用的属性值如下:

正常:默认值css目的,浏览器将显示标准字体样式。

斜体:浏览器将显示粗体字体样式。

oblique:浏览器将显示倾斜字体样式。

字体:全面设置字体样式

font属性用于综合设置字体样式。 其基本句型如下:

选择器 {font: font-style font-weight font-size/line-height font-family;}

CSS 外观属性

颜色:文字颜色

color 属性用于定义文本的颜色。 其取值形式如下:

 预定义的颜色值,如red,green,blue等。

 十六进制.

 RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是,如果使用RGB编码的比例颜色值,值为0时百分号不能省略,必须写成0%。

线高:线宽

text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐方式,相当于HTML中的align对齐属性。 其可用的属性值如下:

left:左对齐(默认值)

右:右对齐

center:居中对齐

文本缩进:首行缩进

text-indent 属性用于设置第一行文本的缩进。 它的属性值可以是不同单位的值、em字符间距的倍数、或者相对于浏览器窗口长度的比例%。 允许负值。 建议使用 em 作为设置单位。

文字装饰 文字装饰

text-decoration通常用于改变链接的装饰效果。

基本选择器

标签选择器(元素选择器)

标签选择器是指使用HTML标签名称作为选择器,根据标签名称进行分类,为页面中的某类标签指定统一的CSS样式。 其基本句型如下:

标签名称{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者

元素名称{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

类选择器

类选择器用“.”标记。 (英文点),后面是类名。 其基本句型如下:

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

调用标签时只需使用 class="class name" 即可。

类选择器的优点:

可以为元素对象定义单独或相同的样式。 您可以选择一个或多个标签。

多类名选择器

我们可以为标签指定多个类名,以实现更多的选择。

注意:

样式显示的效果与HTML元素中类名的顺序无关css目的,而是与CSS样式书写的顺序有关。 用空格分隔每个类名称。

当后期布局比较复杂时,往往会用到多类别名称选择器。

亚瑟

刘备

安其拉

貂蝉

id选择器

id 选择器用“#”标记,后跟 id 名称。 其基本句型如下:

#id name {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

id选择器和类选择器的区别

W3C规定同一页面上不允许出现同名的id对象,但允许同名的类。

通配符选择器

通配符选择器由“*”符号表示。 它的范围是所有选择器中最广的,可以匹配页面上的所有元素。 其基本句型如下:

* {
margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 css css目的-CSS 基础知识 http://www.wkzy.net/game/199662.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务