县区社保经办网站建设,四川建设网有限责任公司是国企吗,丰台网站开发联系电话,工程建设强制性标准文章目录 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
3. 轮廓的样式 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 **classimportant**This heading is very important./h1p **classimportant**This 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 **idintro**This 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
