HTML-CSS样式
什么是CSS (1)
CSS语言语法 (1)
CSS的四种设置方式 (2)
什么是样式选择器 (2)
HTML选择器 (2)
类选择器 (3)
ID选择器 (3)css样式表优先级最高
关联选择器 (3)
组合选择器 (3)
伪元素选择器 (3)
样式规则的继承 (4)
样式规则的优先级 (4)
CSS中修饰字体的属性 (4)
CSS中常见的控制文本的属性 (5)
什么是CSS
CSS是Cascading Style Sheets的简写,它除了可以轻松设置
网页元素的显示位置和格式处,甚至还能产生滤镜,图像淡化,网
页淡入淡出的渐变效果。
CSS
一个样式表由样式规则组成,以告诉浏览器怎样去呈现一个文档
简而言之,CSS就是要对网页的显示效果实现与Word一样的排
版控制。
一个段落:字体:红;背景:黄;有一个2个像素实线边框;
字体大小为4cm;
Id class style name
CSS语言语法
格式
属性:值;属性1:值1;属性2.。。。;
属性和值使用冒号“:”,多个属性之间使用分号“;”
单位
颜:#rgb#8fa#aaffaa red green rgb(255,0,10)
大小:em2em px pt%pc cm mm in
URL(url)
注释/**/在其中不要再包含注释
CSS的四种设置方式
内联样式表:在HTML元素标签中使用style属性内联
每个HTML标签都可以加样式
嵌入样式表:通过HTML的<style>标签将CSS嵌入到HTML中使用
可以控制当前页面的所有样式
外部样式表:将样式单独定义在一个后缀名为.css的文档中,并在HTML中通过link元素连接到HTML中使用。
多个页面都可以使用
输入样式表:可以将一个样式文件输入到另外一个样式文件的中,或将一个样式文件输入到<style>元素中
@import url(css文件)
他们的优先级别:
内联的高于其它的,其它的和加载的顺序有关
什么是样式选择器
Selector{/*Selector是样式选择器*/
property:value;/*color:red;*/
property:value;/*font-size:4cm;*/
…
}
Selector:当定义一条样式规则时,必须指定受这条样式规则作用的网页元素,在一条规则中定义的网页元素就是selector(选择器),也就是选择该样式规则作用于的网页元素。
HTML选择器
HTML有标签,CSS就用选择器
选择符就是赋予内部或外部样式表的名字
HTML的标签,用来改变一个指定标签的样式
任何一个元素都可以是一个CSS选择符
类选择器
同一个选择器能有不同的类,因而允许同一个元素有不同的样式
定义的方法
[tag].类名(类名是自定义的,如果不加tag则代表所有HTML元素)
<tag class=“类名类名1类名2”>(同一个元素可以使用多个类,类名之间使用空格分开)ID选择器
在HTML页面中,ID属性指定了某个单一元素,id属性就用来对单一元素定义单独样式一个HTML页面中,ID属性值要唯一
#idname{}(idname是自定义的名称)
<tag id=“idname”>
关联选择器
关联选择器只不过是一个用空格隔开的两个或更多的单一选择器给成的字符串
因为层叠顺序的规则,它们的优先权比单一的选择符大
必须按关联关系使用,不能有反顺序
只要能保持关联关系就可以,不管是在多少层
组合选择器
为了减少样式表的重复声明,组合是允许的
只要使用英文逗号(,)隔开每个选择符就可以了
伪元素选择器
伪元素选择器是指对同一个HTML元素在不同的状态下的一种定义方式
目前只有a和p两处HTML元素可以使用
使用时的语法
标签:伪元素标签[.类名]:伪元素
a:link没有任何运作前的状态
a:hover光标移到到超链接上的状态
a:active:选择超链接的状态
a:visited访问过超连接的状态
p:first-letter一个段落中首个字母的状态
P:first-line一个段落中首行的状态
样式规则的继承
所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。样式规则的优先级
关联>ID选择器>CLASS选择器>HTML标签选择器
CSS中修饰字体的属性
font:[<;字体风格>||<;字体变形>||<;字体加粗>]?<;字体大小>[/<;行高>]?<;字体族科> CSS中常见的控制文本的属性
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论