CSS常用样式有哪些-创新互联
这篇文章主要为大家展示了“CSS常用样式有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS常用样式有哪些”这篇文章吧。
专注于为中小企业提供成都网站设计、成都网站制作、外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业阜南免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。1、CSS
层叠样式表,用于对页面进行美化。
在HTML中的方式有三种:元素内联、页面嵌入、外部引入。
(1)、元素内联:对其特定标签的样式进行设置;
(2)、页面嵌入:在其中写入样式,对其整个页面内的标签均可设置;
(3)、外部引入:就是写到了一个文件中(.css),对需要这种样式时引入文件即可。
2、常见样式
(1)、标签选择器
含义:其后出现的所有这种标签都是这种样式
div{ color: red; }
(2)、class选择器
.logo{ background-color: red; font-size: 18px; border: 1px; } 后面调用:
(3)、id选择器
注意:每个标签的id号是唯一的。
#logo{ background-color: red; font-size: 18px; border: 1px; } 后面调用:
(4)、关联选择器(以空格分开)
div p{ } 后面调用::就是div标签下面的p标签是这个样式
(5)、组合选择器(以,分开)
p, div{ color: red; } :后面出现p/div标签的都是这个样式
(6)、属性选择器
input[type = 'text']{ } 使用:凡是出现input标签中带有type='text'的都使用这个样式
(7)、需要注意的:
关于以上样式的完整代码:
页面一 123123123///////////////////////////////////////////////////////////////////////////页面一 p标签
3、背景图片
(1)、原生的引入图片
#双引号中写的是当前路径下的图片
(2)、背景图片的引入:background;
注意:使用background时,要注意将背景图片放到盒子中,就是必须指明宽、高。
运行结果
4、边框
border:线的宽度 实/虚(solid/dotted) 颜色;后面可以设置边框的宽度和高度;
margin:与外边框的距离;里面的边框相距外边框的距离;
padding:与内边框的距离;里面的文字距离自己里面边框的距离;
页面一 西安市
运行结果
5、display
常见的就三种形式:
(1)、display:none; #隐藏显示
(2)、display:block; #以块级标签的形式显示
(3)、display:inline; #以内联标签的形式打印
页面一 不会出现的 内联标签块级标签块级标签
运行结果
6、cursor
使用目的:在鼠标到达这个位置时,鼠标会出现不同的风格形式;
页面一 小手 1 2 3 4 #可以自定义形式(小图标)
这个截图看不出效果,就是不同的形式展现,鼠标在不同的文字上出现时;
7、float
一般使用left和right;
使用目的:划分区域,可以使之飘起来,是以堆叠的形式展现;
页面一 div1div2#解决子标签有float,还能使用父标签样式的方法2
运行结果
8、position
常用的就三种:
(1)、position:fixed 固定的位置,不在改变
(2)、position:relative
(3)、position:absolute relative和absolute一般联合使用;
页面一
分别看几种运行结果
9、opacity(透明度)
使用目的:一般设置图片/背景颜色的亮度;
.p_w_picpath{ opacity:0.4; }
10、模拟一个对话框
写一个小例子,就是出现对话框,让我们自己选择的那种;
页面一
IP | 编辑 |
---|---|
11.11.11.11 | 删除 |
11.11.11.12 | 删除 |
运行结果
以上是“CSS常用样式有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站制作公司行业资讯频道!
创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。
分享题目:CSS常用样式有哪些-创新互联
文章起源:http://scyanting.com/article/dihcdo.html