css简要介绍
CSS全名:(Cascading Style Sheets,层叠样式表、样式表),我们可以根据需要来修改某一个或者某一类HTML元素的样式。
XHTML是结构标记:哪些地方是段落,哪些地方是项目符号,哪些地方是图片等
CSS是表现、格式:这个段落文本颜色、大小、对齐方式、边框、背景颜色等。
以前作网站是用以下方式来:
北京传智播客教育培训中心
现在我们要将结构和表现分离:
北京传智播客教育培训中心
CSS语法格式:
p(选择器){
Color(属性名称):#FF0000(值);
Font-size(属性名称):24px(值);
}
一个格式表由多个样式规则构成;
一个格式规则由“选择器”和“格式声明语句”构成,如:p就是选择器,{}中的语句就是格式定义;
选择器就是要定义样式的HTML元素(标记);
格式声明语句放在{}中,{}中由多个格式声明语句构成;比如:color:#FF0000;
格式语句由“属性名称”和“属性值”构成,属性名称和属性值间用冒号隔开,每个格式语句必须以分号结束。
CSS选择器:给哪一个HTML标记加样式
一、基本选择器
(1)通用选择器(*)
格式:*{font-size:24px;}
说明:通用选择器(*),将匹配所有的HTML标记。
注意:通用选择器(*),IE6不支持,建议尽量少用。
(2)标签选择器,对应于所学的HTML标记
格式:h2{color:#FF0000;}
举例: h3{color:#FF0000;}
p{font-size:14px;line-height:150%;color:#9900CC;}
li{color:#0000ff;text-decoration:underline;cursor:pointer;}
(3)类样式:就是给一类HTML元素添加样式,类样式以“.”开头。(使用最多的样式)
可以同时给多个HTML元素增加class属性,class属性的值可以一样。
这是一个段落
.news{ color:#FF0000; font-size:24px; }
(4)id选择器:给标记特定id属性的HTML元素添加样式,id选择器必须以“#”开头。(使用最少的样式)
HTML元素的id属性的值,必须唯一。
Id属性就相当于×××号一样,不能重复;
HTML元素的id属性,一般是给JS使用;
#box{color:#FF0000;}
二、组合选择器
(1)多元素选择器:E,F,G,H{color:#FF0000;}
说明:同时给E元素、F元素、G元素、H元素增加样式,多个元素间用逗号隔开
body,div,ul,li,ol,dt,dd,p,form,a{margin:0px; padding:0px; }
div.box,div#header,form{color:#FF0000; }
div.box含义:class=“box”的
div#header含义:id=“header”的
(2)后代元素选择器
格式:E F{color:#FF0000;}
说明:E元素的所有后代的F元素,增加样式,中间用空格隔开
.news li{width:400px;border:1px solid#006600;}
(3)子元素选择器
格式:E > F{color:#FF0000}
说明:匹配E元素的子元素F,增加样式
举例:.news >.title{background-color:#FFCC66;}
三、伪类选择器:一般是给超级链接增加CSS样式
一个链接有四种状态:正常状态(:link)、放上状态(:hover)、激活状态(:active)、访问过的状态(:visited)
(1)全局链接样式的设置
a:link,a:visited{color:#0000FF;text-decoration:none;}
a:hover{color:#990000;text-decoration:underline;}
(2)局部链接样式的设置:给一类链接加样式
a.a1:link,a.a1:visited{color:#009900;font-weight:bold;font-size:18px;}
a.a1:hover{ color:#FF00FF;border:1px solid #996600;}
1.CSS尺寸属性
Width:指定元素的宽度,单位是 px或%
Height:指定元素的高度,单位是px或%
注意:任何HTML元素,都可以看成一个“盒子”,都具有width、height、padding(内边距)、margin(外边距)、border、backgroun(背景)。 比如: 2.CSS文本属性 Color:文本颜色,取值:英文单词、10进制、16进制; text-align:文本的水平对齐,取值:left center right text-decoration:文本修饰线,取值:none、underline、overline、line-through text-indent:首行缩进,text-indent:36px; letter-spacing:字间距 line-height:行高,line-height:150%; line-height:24px; 3.CSS字体属性 font-family:设置字体 font-weight:粗细,取值:bold,相当于 font-style:斜体,取值:italic,相当于 font-size:文字大小 font:简写的形式,各个属性值间用空格隔开 body{ font-size:24px; font-family:黑体; font-weight:bold; font-style:italic; } body{ font:bold italic 24px 黑体; } 4.CSS列表属性 list-style-type:列表的类型,取值:none、disc、circle、square list-style-p_w_picpath:列表的图片,list-style-p_w_picpath:url(p_w_picpaths/li01.gif); list-style-position:符号的位置,取值:outside(外)、inside(内) list-style:简写形式时, 各个属性值间用空格隔开 .li01{ list-style-type:none;list-style-p_w_picpath:url(p_w_picpaths/li01.gif);list-style-position:outside; } .li01{ list-style:url(p_w_picpaths/li01.gif) disc outside;} 实现:单行文本在一个“容器”中垂直居中,使用的原理是,height和line-height值一样,就可以实现。 例子: 另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。等
新闻标题:css简要介绍-创新互联
网站链接:http://cdkjz.cn/article/dgcipg.html