首页 > 代码库 > CSS样式表
CSS样式表
1,:内联样式表 即写在标签内部
solid表示实线,得到效果
修改语句加宽高(注意分号隔开)
得到效果
当新设置行高(line-height:"")与外边框一样高的时候
123出现垂直居中
之后想让123再出现水平居中则添加text-align:center (align 属性规定 div 元素中的内容的水平对齐方式)
出现效果
再让整个div居中,则设置边距margin:0px 再设置左右边距自动调整:auto
2:内嵌样式表 (必须写在head标签里,因为程序先读取head标签)style标签
注意,type标签可以不写,只写style
比如只针对p标签起作用,就直接使用p写样式 ,比如设置背景颜色和文字大小,如下
此时需要body中添加一个相对应的P标签,如下
显示如下
若在body中设置多个P标签,都执行内嵌样式
显示如下
总结:
3:外部样式表
注意写外部样式表的时候会首先默认写一个星号*
margin间距设为0
padding间距设为0 间距:P标签与P标签之间的距离
比如此时*号标签等于对于所有标签去除边距和间距
新建一个外部样式表,新建css
新建如下
然后把*标签与p标签剪切过来
注意因为本身是css,所以不需要放置style标签,可直接写样式表
所以保存后,出现效果如下
在HTML当中引用css样式表,鼠标右键·····如下
·············································
之后出现对应CSS的link语句
此时保存刷新,则又出现之前出现过的样式,如图
二 选择器
1.标签选择器,就是上面说过的
2.class选择器
class表示类,以点“.”开头,以class引用,可多次引用
举例:
比如在css中设置一个.aa标签
接下来用class在HTML中的第二个p标签中引用.aa 。如下所示:
显示效果:
小结:.class选择器在css中以点开头设置标签,以class=“”在HTML的P标签中引用
3.ID选择器 以#开头以ID引用,可以多次引用吗?不可以,注意ID是唯一引用
例如在css中写入一个ID标签
在html中引用,如下
效果如下:
不能两个p标签引用同一个ID标签,ID只能引用一次,class可以多个引用
4.复合选择器
例如P标签和span标签同时执行此样式:
同时HTML中:0
效果如图:0
(2):
其中.main表示在class=main所引用的标签内部(即两个尖括号中间的位置),如果有P标签存在,则这个P标签执行以下的样式。后代指被包围的。
例如:
同时css中如下
显示效果
其中黄色内容为p标签
(3)筛选:
此表示:p标签当中class等于sp的 执行以下此样式
例如:
同时HTML中
显示如下
注:可以理解为前面的P标签的规则没起作用···p标签只是起到了一个导向性的作用
二.样式属性★★★★
1. 样式属性之背景与前景
1.背景:
2.前景字体:
(二)边界和边框
border(表格边框、样式等)、margin(表外间距)。padding(内容与单元格间距)。
例如:
显示如图:
(三)列表与方块
width、height、(top、bottom、left、right)只有在绝对坐标情况下才有用。
效仿360浏览器中网站链接样式的写法
链接的style:
a:link 超链接被点前状态
a:visited 超链接点击后状态
a:hover 悬停在超链接时
a:active 点击超链接时
在定义这些状态时,有一个顺序l v h a 一定要按照顺序来
例如:
显示如图
此时访问过后默认浏览痕迹为紫色,如图
然后在css中写入一个link标签,让此链接没有x下划线(text-decoration:none),如图
再写visited
再写hover(鼠标指在上方时,即鼠标悬浮在上方),此时出现下划线与文字颜色:
再写active(行动),即点击时显现的颜色:
之后保存刷新后出现360浏览器链接样式效果,不附图
但是如下图中不同颜色的链接:
则需要分类,写法如下
l v h a 中分别加标签“.a1”,如下:
再在HTML中 class="a1" 如下:
再回到css中 复制一组lvha改标签为a2 , 并改变初始颜色 如下:
4
在HTML中再引用a2,如下
效果如下
注:其中hover还可以在其他div中使用
例如:
显示效果:鼠标指向时div区域变为绿色,鼠标离开变为蓝色。如下
最后思维导图总结:
CSS样式表
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。