相信在阅读了主编日前发表的关于HTML的学习后,大家对网站建设和主页制作有一定的初步知识。 今天,我们将向大家介绍为美化HTML网页的排版而设计的css。 css是为了实现HTML无法设计的效果而设计的,一般与HTML一起使用。 一般模式:选择器{属性:值}即选择器字体大小: 12px; 他有三种导入方法:内联样式表、内部样式表和外部样式表。
css有三种嵌入方式。
一、内联风格
使用style属性引入CSS样式。
示例:
h1 style='color:red;' 应用样式属性/h1
p样式='字体大小:14 px; color :绿色;' 要直接设置为HTML标签的样式/p
实际写页面时不提倡使用,测试时可以使用。
例如:
! doctypehtmlheadmetacharset=' utf-8 '/title内联样式/title /头主体! - -使用内联样式部署CSS---- h1样式=' color : red;' lapingabovethewater/h1p样式=' color : red; 字体大小:30 px;' 我是p标签/p /body /html
二、内部样式表
在style标签中写入CSS代码。 style标签写在头标签上。
示例:
头部
样式类型='文本/CSS '
H3
颜色:红色;
}
/样式
/head
比如说! doctypehtmlheadmetacharset=' utf-8 '/title内部样式表/title! - -使用内部样式表指定CSS---- styletype=' text/CSS ' div {背景3360绿色; } /style /head body div我是DIV/div /body /html
三、外部样式表
CSS代码保存在扩展名为. CSS的样式表中
HTML文件引用扩展名为. css的样式表,有链接表达式和导入表达式两种方法。
语法:
1、连杆式
linktype='文本/CSS ' rel='样式表' href=' CSS文件路径' /
2、导入式
样式类型='文本/CSS '
@导入URL (CSS文件路径);
/样式
比如说! doctypehtmlheadmetacharset=' utf-8 '/title外部样式表/title! - -链接式:推荐- -链接列='样式表'类型='文本/CSS ' href=' CSS/style.CSS ' /! - -导入表达式----styletype='文本/CSS ' @导入URL (CSS/style.CSS );/style/headbodyolli 1111/Lili 2222/Li/ol/html
内嵌样式内部样式外部样式(后者为邻近原则)。
css注释的格式如下。
/*注释如下。 /
css的颜色值表示如下:
我可以直接写英语单词。 例如,蓝色尽量能写蓝色; 另外,也可以写入为#rrggbb#ffcc00等十六进制字符。 #rgb,例如:#fc0的十六进制的颜色可以用颜色表来查。 这里提供一个。 当然网上也有很多。 大家也可以自己百度一下。
另一种颜色的表示方法是rbg模式。 例如:
RGB(x、x、x )其中x是0-255的整数值,如:RGB ) 255、204、0 )
RGB(x%、x%、x% )其中,x是RGB(100%、80%、0% )等0-100的整数值
Css长度单位:
相对长度单位: px像素em相对于当前文本字体大小的倍数%
绝对长度单位:英寸(英寸)点)点)厘米(厘米)毫米)。
换算比例: 1in=2.54厘米=25.4毫米=72pt
Css的7个主要选择器:
标签选择器例如p{};
类别选择器例如. div{}; (点和命名类名)
Id选择器例如#div{}; (给斜体的井号赋予ID名称,ID不可重复,类可以相同。)
通配符选择器: *{};
伪类选择器:
a :链接访问时没有链接;
访问了a:visited{}过时的链接;
a :移动鼠标悬停时的链接;
a :活动{2}已选定的链接;
3360第一个字符{ }设置第一个字符的样式;
设置3360最后一个字符的样式;
: nth-child可以设置指定字符的样式
派生选择器(后代选择器、子元素选择器和相邻的同级选择器) :
后代选择器:用空格分隔
颜色: # 0099厘米; }
子元素选择器:用分隔开
UL沥
邻接兄弟选择器:是分隔符
div div ul li
最后是组合选择器。 请用逗号分隔
h1,h2,h3,h4,h5,h6 {颜色:绿色}
那么,css的基础就介绍到这里了。 如果有什么不明白的地方可以给编辑发消息。 如果有什么好建议的话,可以关注编辑。 我们一起学习,一起讨论,一起进步。 接下来我将介绍css的属性,敬请期待