奎文营销型网站建设天工网

当前位置： 首页 > news >正文

奎文营销型网站建设,天工网,如何建网站保定,姓氏头像在线制作免费生成图片文章目录 CSS简介CSS 概念CSS 作用CSS 语法 CSS引入方式1.内联样式表2.内部样式表3.外部样式表 CSS常用样式CSS背景1.背景色#xff1a;background-color2.背景图像#xff1a;background-image: url();3.背景重复#xff1a;background-repeat4.背景定位#xff1a;backgr… 文章目录 CSS简介CSS 概念CSS 作用CSS 语法 CSS引入方式1.内联样式表2.内部样式表3.外部样式表 CSS常用样式CSS背景1.背景色background-color2.背景图像background-image: url();3.背景重复background-repeat4.背景定位background-position5.背景关联background-attachment CSS文本1.缩进文本 text-indent2.水平对齐 text-align3.字间隔word-spacing4.字母间隔 letter-spacing5.字符转换 text-transform6.文本颜色 color7.行高 line-height8.对齐元素中的文本 text-align CSS字体1.指定字体系列 font-family2.字体风格 font-style3.字体加粗 font-weight4.字体大小 font-size CSS链接1.链接的状态2.去掉链接中的下划线text-decoration3.背景色background-color CSS轮廓1.轮廓 outline2.轮廓的颜色 outline-color3. 轮廓的样式 outline-style4.轮廓的宽度 outline-width CSS表格1.表格边框 border2.单线条边框 border-collapse3.表格宽度和高度 width 和 height4.水平对齐方式 text-align5.表格内边距 padding6.表格颜色 background-color; color CSS常用选择器1.标签选择器元素选择器2.类选择器 .3.ID 选择器4.子选择器 CSS简介 CSS 概念 CSS称之为层叠样式表或级联样式表。样式定义如何显示HTML元素。样式通常存储在样式表中。 CSS 作用 CSS以HTML为基础提供了丰富的功能而且还可以针对不同的浏览器设置不同的样式。CSS主要用于设置HTML页面中的文本内容字体、大小、对齐方式等、图片的外形宽高、边框样式、边距等以及版面的布局和外观显示样式。 CSS 语法 CSS语法由两个主要的部分构成选择器以及一条或多条声明。每条声明由一个属性和一个属性值组成。简单来说一个样式的语法是由三部分构成选择器、属性和属性值。 例如 h1:{color:red;font-size:30px;}CSS引入方式 1.内联样式表 内联样式表也称之为行内样式表、行间样式表。内联样式表是把CSS代码和HTML代码放在同一个文件中。如果要使用内联样式需要在相关的标签内使用样式style属性。Style属性可以包含任何CSS属性。语法标签名 style属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 内容/标签名示例 !DOCTYPE html htmlheadtitle内联样式表/title/headbodyh1 stylecolor:red;我是内联样式表也可以称我为行内样式表、行间样式表/h1/body /html2.内部样式表 内部样式表也称之为内嵌样式表是将CSS代码集中写在HTML文档的head头部标签中并且用style标签定义。语法 !DOCTYPE html html headtitle内部样式表/titlestyle选择器{属性1:属性值1;属性2:属性值2;}/style /head body /body /html示例 !DOCTYPE html html headtitle内部样式表/titlestylep{color:pink;}/style /head bodyp我是内部样式表也叫内嵌式样式表/p/body /html3.外部样式表 外部样式表又称之为链入式或者外链式。所谓外部样式表就是把CSS代码和HTML代码都单独放在不同文件中然后在HTML文档中使用link标签来引用CSS样式表。外部样式表的文件扩展名是.css且文件中不能包含任何html标签。语法headlink relstylesheet typetext/css href1.css/head示例 !DOCTYPE html html xmlnshttp://www.w3.org/1999/xhtml headtitle/title!–在HTML页面中引用文件名为index的css文件–link hrefindex.css relstylesheet typetext/css / /head bodydiv/div /body /htmlCSS常用样式 CSS背景 1.背景色background-color 示例 html headstyle typetext/cssbody {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)}/style/headbodyh1这是标题 1/h1 h2这是标题 2/h2 p这是段落/p/body /html2.背景图像background-image: url(); 示例 html headstyle typetext/css body {background-image:url(/i/eg_bg_04.gif);} p.flower {background-image: url(/i/eg_bg_03.gif);} a.radio {background-image: url(/i/eg_bg_07.gif);} /style/headbody p classflower我是一个有花纹背景的段落。a href# classradio我是一个有放射性背景的链接。/a/p/body/html3.背景重复background-repeat 注意属性值 repeat 导致图像在水平垂直方向上都平铺就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复no-repeat 则不允许图像在任何方向上平铺。示例 html headstyle typetext/css body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y } /style/headbody /body /html4.背景定位background-position 5.背景关联background-attachment 示例 html html head style typetext/css body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed } /style /headbody p图像不会随页面的其余部分滚动。/p pA/p pB/p pC/p pD/p pE/p pF/p pG/p pH/p pI/p pJ/p pK/p pL/p pM/p pN/p pO/p pP/p pQ/p pR/p pS/p pT/p pW/p pX/p pY/p pZ/p p1/p p2/p p3/p p4/p p5/p p6/p p7/p p8/p p9/p /body/htmlCSS文本 1.缩进文本 text-indent 2.水平对齐 text-align 3.字间隔word-spacing 示例 html head style typetext/css p.spread {word-spacing: 30px;} p.tight {word-spacing: -0.5em;} /style /headbody p classspreadThis is some text. This is some text./p p classtightThis is some text. This is some text./p /body /html4.字母间隔 letter-spacing 示例 htmlhead style typetext/css h1 {letter-spacing: -0.5em} h4 {letter-spacing: 20px} /style /headbody h1This is header 1/h1 h4This is header 4/h4 /body/html5.字符转换 text-transform 示例 htmlhead style typetext/cssh1 {text-transform: uppercase}p.uppercase {text-transform: uppercase}p.lowercase {text-transform: lowercase}p.capitalize {text-transform: capitalize} /style /headbody h1This Is An H1 Element/h1 p classuppercaseThis is some text in a paragraph./p p classlowercaseThis is some text in a paragraph./p p classcapitalizeThis is some text in a paragraph./p /body/html6.文本颜色 color 7.行高 line-height 8.对齐元素中的文本 text-align CSS字体 1.指定字体系列 font-family 2.字体风格 font-style normal - 文本正常显示italic - 文本斜体显示oblique - 文本倾斜显示 示例 html head style typetext/css p.normal {font-style:normal} p.italic {font-style:italic} p.oblique {font-style:oblique} /style /headbody p classnormalThis is a paragraph, normal./p p classitalicThis is a paragraph, italic./p p classobliqueThis is a paragraph, oblique./p /body/html3.字体加粗 font-weight 4.字体大小 font-size CSS链接 1.链接的状态 a:link - 普通的、未被访问的链接a:visited - 用户已访问的链接a:hover - 鼠标指针位于链接的上方a:active - 链接被点击的时刻 注意次序规则a:hover 必须位于 a:link 和 a:visited 之后a:active 必须位于 a:hover 之后 2.去掉链接中的下划线text-decoration 3.背景色background-color CSS轮廓 1.轮廓 outline 示例 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html head style typetext/css p { border:red solid thin; outline:#00ff00 dotted thick; } /style /headbody pb注释/b只有在规定了 !DOCTYPE 时Internet Explorer 8 以及更高版本 才支持 outline 属性。/p /body /html2.轮廓的颜色 outline-color

1. 轮廓的样式 outline-style 4.轮廓的宽度 outline-width CSS表格 1.表格边框 border 示例 html head style typetext/css table,th,td { border:1px solid blue; } /style /headbody table tr thFirstname/th thLastname/th /tr tr tdBill/td tdGates/td /tr tr tdSteven/td tdJobs/td /tr /table /body /html2.单线条边框 border-collapse 3.表格宽度和高度 width 和 height 4.水平对齐方式 text-align 5.表格内边距 padding 6.表格颜色 background-color; color 示例 html head style typetext/css table, td, th{border:1px solid green;}th{background-color:green;color:white;} /style /headbody table tr thFirstname/th thLastname/th /tr tr tdBill/td tdGates/td /tr tr tdSteven/td tdJobs/td /tr /table /body /htmlCSS常用选择器 1.标签选择器元素选择器 示例 html head style typetext/css html {color:black;} p {color:blue;} h2 {color:silver;} /style /headbody h1这是 heading 1/h1 h2这是 heading 2/h2 p这是一段普通的段落。/p /body /html2.类选择器 . 为了将类选择器的样式与元素关联必须将 class 指定为一个适当的值。示例 html head style typetext/css .important {color:red;} /style /headbody h1 classimportantThis heading is very important./h1p classimportantThis paragraph is very important./ppThis is a paragraph./ppThis is a paragraph./ppThis is a paragraph./pp…/p /body /html3.ID 选择器 示例 html head style typetext/css #intro {font-weight:bold;} /style /headbody p idintroThis is a paragraph of introduction./ppThis is a paragraph./ppThis is a paragraph./ppThis is a paragraph./pp…/p /body /html4.子选择器 子元素选择器Child selectors只能选择作为某元素子元素的元素。示例 !DOCTYPE HTML html head style typetext/css h1 strong {color:red;} /style /headbody h1This is strongvery/strong strongvery/strong important./h1 h1This is emreally strongvery/strong/em important./h1 /body /html