CSS样式表初学,比C#和JS简单
今天咱们一起来看下CSS样式表的基本基础
经常看博客或者喜欢钻研代码这一类的人对CSS可能有所耳闻,但具体的可能不是很清楚
那什么是CSS呢?与HTML又有什么区别呢?今天咱们就来说道下这个CSS
CSS:层叠式样式表
HTML:超文本标记语言
HTML是负责展示你的网页上都有什么内容,都有什么
CSS是负责你的网页上的内容都怎么摆布,什么样的格局
那CSS到底怎么用呢?布局用HTML中的table不久可以布局么,根据具体要求进行切割就行,没必要用CSS布局,很多人都会这么想
那我要是告诉你一种简单快捷高效的布局方式,你还会用哪个?本来用table布局你需要三个工作日,那用CSS只需要半天就可以了,并且还会有很多人性化的展示,你会选择哪个?不要告诉我你习惯了table,不会去学别的了,这不现实,保质保量的背后一定要有效率的存在才能成立,不多废话,开始正题
咱们先来做这么一个东西,大家看一下效果

无论是看代码还是看效果,都是简单明确,指向性强,并且可调试的更加细腻,比方说第一行的字体大小,用HTML来写就是这样
<font size="7">阿拉斯加的辣椒素</font>
在HTML中size最大也就是7,并且是字体大小,而在CSS中调的是像素px,你可以一个像素一个像素的调,更加精确更加细腻,毕竟现在的显示器都到了4k了
那从代码量来看可能很多人认为CSS这个代码量并不比HTML中的少啊,别慌,往下看

就简单的随便写几个代码出来的效果,用table你要切多少次?好处不必多说,趋势的发展容不得你不去改变
今天咱么需要记住的东西还是比较多的
看下面
在CSS中最常用到的就是style:属性方式
所有的属性记得要写在style里面(其实我是靠江南style来记住的)
width:宽px(像素单位px,记得要带单位)
height:高(同上)
background-color:背景色red/#010101
font-weight:字体粗细
font-style:倾斜
text-decoration:line-through/under-line 下划线
color:颜色
font-size:尺寸 一般情况下就是12~16px, 需要展示用的时候可以用到18px
font-family:字体样式
float:left 流式布局
min=width:300px 最小宽度(用在float:left上的,起到限制作用,可以这么简单的理解下)
background-image:url(相对路径)
background-repeat:round 在设置背景图中,round选项会横向和纵向重复一张图片,不会被裁剪,但是可能会改变图像大小,如果换成space,那就不会被裁剪或者是改变大小
position:absolute是绝对位置,就是将控件固定在某处,比如说将空间固定在页面中间,无论你怎么拉伸或缩小浏览器,这个控件依旧处于页面中的中间位置
CSS样式表初学,比C#和JS简单的更多相关文章
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
- CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器
CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...
- JavaScript对css样式表操作
CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...
- CSS样式表的写作规范
推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...
- CSS样式----CSS样式表的继承性和层叠性(图文详解)
本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...
- 漂亮的表格样式–>使用CSS样式表控制表格样式
依照WEB2.0风格,设计了几个表格样式,希望大家喜欢.WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择.现在介绍使用CSS样式表来控制.美化表格的方法. ...
- 8 loader - 配置处理css样式表的第三方loader
// 使用import语法,导入css样式表 import './css/index.css' // 注意:webpack,默认只能打包处理JS类型的文件,无法处理其它的非JS类型的文件: // 如果 ...
- 深度理解CSS样式表,内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS样式表
CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
随机推荐
- 局域网里连接mysql服务器,其他人连接自己的mysql服务器
应用场景: 自己在自己的机器上开发网站,同事也要和我一起开发,就两个人,我自己的机器当做服务器,让他直接连我的数据库,看我的项目就行了,并且用svn进行开发,相当不错 问题: 怎样在局域网里,其他人 ...
- HttpClient filter中间转发从A tomcat转发至B tomcat
BackFilter.java 主要解决基于HttpGet/HttpPost以及基于HttpPost的附件流转发import java.io.IOException; import java.io.I ...
- 强大的修图app--美图秀秀
美图秀秀的强大之处 市面上有很多图形处理软件,最专业的是ps,但是ps做起来需要的专业技术很高,而美图秀秀可以说用起来并不需要很专业,操作起来非常方便,而且界面可爱.所以说美图秀秀是一款很好用的免 ...
- Java基础——第一个记事本代码与Java注释
一 .使用记事本编辑java文件: 1.打开记事本,重命名文件名,文件拓展名“.java”.(必须要的,系统才能识别java文件) 2.编写一个简单的java代码: public class Hell ...
- 每天一个Linux命令 7
常用yum命令1)查询 yum list #查询所有可用软件包列表yum search 关键字 #搜索服务器上所有和关键字相关的包2)安装 yum -y install 包名选项: install 安 ...
- 1682: [Usaco2005 Mar]Out of Hay 干草危机
1682: [Usaco2005 Mar]Out of Hay 干草危机 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 391 Solved: 258[ ...
- C#"曾经的字符串数组"string[] array=new string[]{"**","****"};
写博客是一件很伟大的事情,尤其是也牛逼的博客,因为它能帮助需要的人,更能使自己对知识有一个更为深刻的理解! 欢迎关注我的博客! 字符串操作(取当前时间) string time=convert.tos ...
- 关于xml中有特珠字符而导致XmlDocument无法Load的处理
这是个小事故导致的... 我们线上有个节目里名称里(`F`H9)MSTJXCX0B3J69,虽然我们看到是(`F`H9)MSTJXCX0B3J69,但百思不得其解,发现每次在XmlDocument.L ...
- 富文本,NSAttributedString,当需要改变的内容有相同的时候的解决方法
在开发的过程中可能会遇到富文本展示,例如:一行文本,前面是题后面是答案,题和答案用不同的颜色字体,但是答案的内容在题总也有,这时候用平常的方法就会展示错误,因为把题中的内容改变了颜色二实际答案却没有改 ...
- 应不应该使用inline-block代替float
CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗? 浮动通常表现正常,但有时候搞起来会很纠结.特别是处理内 ...