CSS样式表(一)

在HTML中为各标签加上样式有内联、内嵌和外部样式表三种添加方式。内联的是直接在标签内添加style="样式"即可;内嵌的是直接嵌在网页内,在<head></head>内加入<style type="text/css">样式表</style>;而外部样式表为新建一个单独的样式文件(CSS),然后将外部样式表至当前样式文件中使用(在head内右键点击,选择CSS样式——附加样式表——文件内点击浏览,然后找到样式表保存的位置,最后确定即可),也可直接输入<link href="样式地址" rel="stylesheet" type="text/css" />。这三者的优缺点进行对比:1.内联的优点为控制精确,缺点为页面杂乱、代码冗余;2.内嵌得优点为代码重用性较高,缺点为控制不如内联的精确;外部的优点是代码重用性最高,缺点同内嵌一样。优先级为内联>内嵌=外部,排在下面一行的可以覆盖上面的一层,因为外部样式表的重用性最高,因此在网页中应用最多。

在使用内嵌和外部的时候,需要用到选择器,在样式表里进行使用,使其能找到标签,需要在标签内输入“id”或“class”,其写法为:选择器{样式表}。选择器有:“#”代表通过id选择,不过因为一个id只能代表一个(注意:id必须以字母开头),所以该选择器只能选择一个;“.”代表通过class选择,能选择多个标签;标签名选择器为直接输入标签名,可使所有这个标签名的样式进行更改;“*”表示全部,即使网站内所有元素的样式进行更改。使用选择器的样式需要在样式内加上单位且用“;”隔开,如width:300px; height:300px;。选择器的优先级为:id>class>标签名>*。选择器还存在组合效果:“#a,#b”中“,”代表并列关系;“#c li”中“ (空格)”代表后代关系;"div.d"中"."代表用class筛选出来。要想打破优先级关系,需要在该样式最后加入“!important”。

样式表中的样式是对网页内所进行展示的文本进行修饰,更改其样貌,样式有对内容的大小、背景、字体、对其方式进行修改,还有修改它的间接边框、列表方块、格式与布局,还存在一些其他的修改。

对大小的修改就是“width”和“height”的修改,即为宽度和高度的修改。对背景的修改为:“background-color”修改背景颜色;“background-img:url”添加背景图片;“background-repeat”为平铺方式,一般选择“no-repeat”意为不平铺;“background-position”为图片的位置,它可以同时输入两个方位并且加上一定的数值即可表示向某个方向移动且距离边框有多少像素的距离,例如top 20px right 20px,表示向右上方向移动,且距离上边框和右边框都为20像素;“background-attachment”为是否可以滚动,常用为fixed不滚动;“background-size”为图片的大小,其中输入设置的宽度和高度即可,如500px 500px,表示宽500像素高500像素。

对字体的设置有:“colo”设置字体颜色;“font-family”为字体的样式,网页中最常用的字体是“微软雅黑”;“font-size”为字体的大小,而常用的几种字体大小为12px(常用于页眉页脚)、14px(用于正文)和16px(为标注常用);“font-weight”字体粗细,一般使用“bold”加粗字体;“font-style”代表字体样式,使用倾斜时使用“italic”;“text-decoration”为字体上常用的一些线,“line-through”为删除线,“overline”为上划线,“underline”为下划线,“none”为去掉下划线,一般用于<a>自带的下划线进行删除效果。

文本之间的对其方式有:“text-aline”为水平对齐方,一般使用“center”进行居中对齐;“line-height”为设置行高;“ertical-aline”为垂直对其方式,常用“middle”进行居中,需要与行高连用才可显示出效果;“text-inden”表示首行缩进,一般30px为缩进两字符。

设置其边界边框,如设置一个<div>的内外边距和下边框时使用:“margin”设置外边距,可根据上右下左(顺时针)的顺序以此输入其大小,也可只设置两个值,表示上下一样大小,左右一样大小,“auto”表示居中;“padding”设置内边框,同样按顺时针的方向输入其大小,如果加了内边距,该元素会相应的变大;“boder”为下边框,输入的内容为1px(边框粗细) solid(实线) (选择颜色)。

列表方块则一般用于设置列表前端的符号的设置:“list-style”为列表前面所使用的符号,常用“none”去掉符号;“list-style-image”代表将列表前端的符号变为图片。

时间: 2024-10-08 21:22:40

CSS样式表(一)的相关文章

网站开发综合技术 第二部分 CSS样式表

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "

HTML基础(三)——css样式表

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p  

css样式表分类

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="index.css"><!--用link标签引入的是外部样式表--> 7 8 9 &

CSS样式表规划经验总结

最近看到一些关于CSS文件管理的问题,下面我就自己的经验说说,一个好的CSS文件主要是看他是否具有易维护性.下面我就说说我个人的看法: 一.CSS文件的规划 我在规划CSS的时候,我比较喜欢建立全局css及各模块css.在html页面中引用全局css,在全局css中引用各模块css.比如,建立global.css为全局css,在全局css中定义“* { … } body { … }”之类的全局样式.在全局样式中通过“@import url(”xxx.css”);”引入模块css. 关于模块CSS

网页css样式表部分

层叠样式表:CSS Cascading Style Sheet.V2.1  (3.0版本有些旧系统不支持) 控制页面样式外观. 一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用. <input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" />       (solid意思是实线) 2.内嵌样式表.

JS 控制CSS样式表

JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... 1 <style type="text/css"> 2 .orig { 3 display: none; 4 } 5 </style> 你想要改变把他的display属性由none改为inline. 解决办法:

css样式表中设置table的第一列的宽度是固定值

table{table-layout:fixed;}table tr td:first-child,table tr td:first-child{width:120px;} 首行第一个td定宽同列的宽度都会和他一样. *注意 第一行 第一个用的是 td 还是 th css样式表中设置table的第一列的宽度是固定值,布布扣,bubuko.com

HTML静态网页(css样式表)美化

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p >内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p   //格式对p标签起作用 { 样式: } </sty

CSS样式表初始化代码

CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化. 最简单的初始化方法就是: * {padding: 0; margin: 0;} .有很多人也是这样写的.这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签

CSS自学笔记(3):CSS样式表的使用

当浏览器读到一个样式表时,浏览器会根据这个样式表来格式化html文档,从而表现出各式各样的网页. 想要浏览器读到样式表,有三种方法: 1.外部样式表 外部样式表可以理解为.CSS文件.当多个页面使用同一个样式的时候,外部样式表是一个很理想的选择. 在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观,无需在调整html文件,尤其是多个页面使用同一个样式的时候. 每个html页面使用标签<link>来连接外部样式表: <head> <link rel="