初识CSS
2022/6/21 23:19:49
本文主要是介绍初识CSS,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
CSS
层叠样式表
css语法:
样式属性名:属性值
优点
①使HTML专注于网页的内容,CSS专注于网页的表现
②提供了丰富的格式化功能
③可以针对各种可视化浏览器(主要有显示器、打印机、PDA等)来设置不同的样式
CSS与浏览器
并不是所有的CSS的样式都被浏览器支持
不同的浏览器对CSS的实现有细微的不同,需要特别注意
1.行内样式
直接使用标记的style属性 style=" width:100px; height:100px; background-color:#F00;”
2.内嵌样式
在HTML中,使用<style></style>标记,将样式写在<style>标记内 注意:<style>标记要指定type属性为text/css
3.链接样式(外链式)
将CSS写入单独的一个文件中,注意该文件的文件扩展名为 .css 在HTML文档中使用<link>标记引入css文件 <link>标记需要指定两个属性:type和rel(relationship) 例:<link type="text/css" rel="stylesheet" href=“sy.css" />
4.使用导入样式
使用@import指令可以将css文件中的css样式导入到不同的地方 导入式的结果和直接书写是同样的效果 导入式可以共享样式代码 可以在内嵌式里使用导入,也可在css文件中使用 导入样式的使用方法 @import url(“sheet1.css”); @import “sheet1.css”;
link引入的样式权重大于import
css选择器
类型(标记)选择器
即使用标签的名字作为选择符 语法:标签{规则} 例:td{color:#F00;}
ID选择器
每个html标签的id都是不一样的 语法:#id{规则}
类(class)选择器
语法:.className{规则} 注意:也可以在前面添加标签名字,如div.className(之间无空格,和包含选择符区分开) 可以为标签指定多个class值,多个值之间用空格隔开 例:<div class="dv top">
包含选择器 后代选择器
通过标签的嵌套选择标签,只要包含就行 语法:选择符a 选择符b {规则} 选择符之间用空格隔开,即选择符a标签内的所有选择符b标签
这篇关于初识CSS的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-07uniapp动态设置不同的css有哪些方法?-icode9专业技术文章分享
- 2024-12-07UniApp 中,怎么通过 CSS 设置 view 组件的水平居中效果?-icode9专业技术文章分享
- 2024-12-06TailwindCSS开发入门教程
- 2024-12-06TailwindCSS项目实战:从入门到上手
- 2024-12-06TailwindCss项目实战:初学者指南
- 2024-12-05TailwindCSS入门指南:轻松上手实用教程
- 2024-12-05TailwindCss入门指南:轻松上手实用技巧
- 2024-12-04Tailwind.css入门:简洁高效的设计利器
- 2024-12-03Tailwind.css学习:从入门到实战的全面指南
- 2024-11-29Tailwind.css入门指南:快速上手实用教程