猪八戒网站开发合同,ug.wordpress,陕西建设部网站,网站设计专业需要什么1、CSS样式规则
选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}2、HTML引入CSS样式表
2.1、行内式
行内式也称为内联样式#xff0c;是通过标签的style属性来设置元素的样式#xff0c;其基本语法格式如下:
标签名 style属性1:属性值1; 属性2:属性值2;…1、CSS样式规则
选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}2、HTML引入CSS样式表
2.1、行内式
行内式也称为内联样式是通过标签的style属性来设置元素的样式其基本语法格式如下:
标签名 style属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 内容 /标签名body
h2 stylefont-size:20px; color:red;使用CSS行内式修饰二级标题的字体大小和颜色/h2
/body2.2、内嵌式
内嵌式是将CSS代码集中写在HTML文档的头部标签中并且用
head
style typetext/css
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
/style
/headhead
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title使用CSS内嵌式/title
style typetext/css
h2{ text-align:center;} /*定义标题标记居中对齐*/
p{ font-size:16px; color:red; text-decoration:underline;} /*定义段落标记的样式*/
/style
/head
body
h2内嵌式CSS样式/h2
p使用style标记可定义内嵌式CSS样式表style标记一般位于head头部标记中title标记之后。/p
/body2.3、外链式
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中通过标签将外部样式表文件链接到HTML文档中其基本语法格式如下:
head
link hrefCSS文件的路径 typetext/css relstylesheet /
/headhead
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title使用链入式CSS样式表/title
link hrefstyle.css typetext/css relstylesheet /
/head
body
h2链入式CSS样式表/h2
p通过link 标记可以将拓展名为.css的外部样式表文件链接到HTML文档中/p
/body2.4、导入式
导入式针对外部样式表文件。对HTML头部文档应用style标签并在 style标签内的开头处使用import语句即可导入外部样式表文件。其基本语法格式如下:
style typetext/css
import url(css文件路径);或 import css文件路径;/* 在此还可以存放其他CSS样式*/
/style3、CSS基础选择器
要想将CSS样式应用于特定的HTML元素首先需要找到该目标元素。在CSS中执行这一任务的样式规则部分被称为选择器。
3.1、标签选择器
标签选择器是指用HTML标签名称作为选择器按标签名称分类为页面中某一类标签指定统一的CSS样式。其基本语法格式如下
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title标签指定式选择器的应用/title
style typetext/css
p{ color:blue;}
.special{ color:green;}
p.special{ color:red;} /*标签指定式选择器*/
/style
/head
body
p普通段落文本蓝色/p
p classspecial指定了.special类的段落文本红色/p
h3 classspecial指定了.special类的标题文本绿色/h3
/body3.2、类选择器
类选择器使用“.”英文点号进行标识后面紧跟类名其基本语法格式如下
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title类选择器/title
style typetext/css
.red{color:red; }
.green{color:green; }
.font22{font-size:22px; }
p{ text-decoration:underline; font-family:微软雅黑;}
/style
/head
body
h2 classred二级标题文本/h2
p classgreen font22段落一文本内容/p
p classred font22段落二文本内容/p
p段落三文本内容/p
/body3.3、id选择器
id选择器使用“#”进行标识后面紧跟id名其基本语法格式如下
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
titleid选择器/title
style typetext/css
#bold {font-weight:bold;}
#font24 {font-size:24px;}
/style
/head
body
p idbold段落1idbold设置粗体文字。/p
p idfont24段落2idfont24设置字号为24px。/p
p idfont24段落3idfont24设置字号为24px。/p
p idbold font24段落4idbold font24同时设置粗体和字号24px。/p
/body3.4、通配符选择器
通配符选择器用“*”号表示它是所有选择器中作用范围最广的能匹配页面中所有的元素。其基本语法格式如下
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }3.5、练习
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title文字Logo/title
style typetext/css
strong{ font-size:100px;}
.blue{color:#2B75F5;}
.red{color:#D33E2A;}
#orange{ color:#FFC609;}
#green{ color:#00A45D;}
/style
/head
body
strong classblueG/strong
strong classredo/strong
strong idorangeo/strong
strong classblueg/strong
strong idgreenl/strong
strong classrede/strong
/body
/html效果图
4、CSS字体样式属性
4.1、font-size设置字号。 4.2、font-family设置字体。
p{ font-family:微软雅黑;}4.3、font-weight定义字体的粗细。 4.4、font-style定义字体风格
如设置斜体、倾斜或正常字体其可用属性值如下 normal默认值浏览器会显示标准的字体样式; italic浏览器会显示斜体的字体样式; oblique浏览器会显示倾斜的字体样式; italic与oblique在显示上没有本质区别italic使用了文字本身的斜体属性oblique是让没有斜体属性的文字倾斜。
4.5、font对字体样式进行综合设置
选择器{font: font-style font-variant font-weight font-size/line-height font-family;}head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
titlefont属性/title
style typetext/css
.one{ font:italic 18px/30px 隶书;}
.two{ font:italic 18px/30px;}
/style
/head
body
p classone段落1使用font属性综合设置段落文本的字体风格字号行高和字体。/p
p classtwo段落2使用font属性综合设置段落文本的字体风格、字号和行高。由于省略了字体属性font-family这时font属性不起作用。/p
/body4.6、font-face
CSS3的新增属性用于定义服务器字体。通过font-face属性开发者可以在用户计算机未安装字体时使用任何喜欢的字体。
font-face{font-family:字体名称;src:字体路径;}5、CSS文本外观属性
5.1、color:定义文本的颜色
其取值方式有如下3种 ①预定义的颜色值如redgreenblue等。 ②十六进制如#FF0000#FF6600#29D794等。实际工作中十六进制是最常用的定义颜色的方式。 ③RGB代码如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
5.2、letter-spacing定义字间距
所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值允许使用负值默认为normal。
5.3、word-spacing定义英文间距
对中文字符无效。
5.4、line-height设置行间距
所谓行间距就是行与行之间的距离即字符的垂直间距一般称为行高。line-height常用的属性值单位有三种分别为像素px相对值em和百分比%实际工作中使用最多的是像素px。
5.5、text-align设置水平对齐方式
相当于html中的align对齐属性其可用属性值如下 left左对齐默认值 right右对齐。 center居中对齐。
5.6、text-transform大小写转换
其可用属性值如下 none不转换默认值。 capitalize首字母大写。 uppercase全部字符转换为大写。 lowercase全部字符转换为小写。
5.7、text-decoration文本装饰
属性用于设置文本的下划线上划线删除线等装饰效果。 其可用属性值如下 none没有装饰正常文本默认值。 underline下划线。 overline上划线。 line-through删除线。
5.8、text-indent首行缩进
其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%允许使用负值, 建议使用em作为设置单位。
5.9、white-space空白符处理
其属性值如下 normal常规默认值文本中的空格、空行无效满行到达区域边界后自动换行。 pre预格式化按文档的书写格式保留空格、空行原样显示。 nowrap空格空行无效强制文本不能换行除非遇到换行标签 br /。内容超出元素的边界也不换行若超出浏览器页面则会自动增加滚动条。
5.10、text-shadow阴影效果
h-shadow用于设置水平阴影的距离v-shadow用于设置垂直阴影的距离blur用于设置模糊半径color用于设置阴影颜色。
5.11、text-overflow处理溢出文本
clip修剪溢出文本不显示省略标签“…”。 ellipsis用省略标签“…”替代被修剪文本省略标签插入的位置是最后一个字符。
5.12、word-wrap
用于实现长单词和URL地址的自动换行。 normal只在允许的断字点换行浏览器保持默认处理。 break-word在长单词或 URL 地址内部进行换。
