CSS样式表初学,比C#和JS简单

今天咱们一起来看下CSS样式表的基本基础

经常看博客或者喜欢钻研代码这一类的人对CSS可能有所耳闻,但具体的可能不是很清楚

那什么是CSS呢?与HTML又有什么区别呢?今天咱们就来说道下这个CSS

CSS:层叠式样式表

HTML:超文本标记语言

HTML是负责展示你的网页上都有什么内容,都有什么

CSS是负责你的网页上的内容都怎么摆布,什么样的格局

那CSS到底怎么用呢?布局用HTML中的table不久可以布局么,根据具体要求进行切割就行,没必要用CSS布局,很多人都会这么想

那我要是告诉你一种简单快捷高效的布局方式,你还会用哪个?本来用table布局你需要三个工作日,那用CSS只需要半天就可以了,并且还会有很多人性化的展示,你会选择哪个?不要告诉我你习惯了table,不会去学别的了,这不现实,保质保量的背后一定要有效率的存在才能成立,不多废话,开始正题

咱们先来做这么一个东西,大家看一下效果

无论是看代码还是看效果,都是简单明确,指向性强,并且可调试的更加细腻,比方说第一行的字体大小,用HTML来写就是这样

1      <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是绝对位置,就是将控件固定在某处,比如说将空间固定在页面中间,无论你怎么拉伸或缩小浏览器,这个控件依旧处于页面中的中间位置

时间: 2024-10-25 01:22:46

CSS样式表初学,比C#和JS简单的相关文章

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. 解决办法:

JavaScript对css样式表操作

CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<head></head>之间的样式表 <head> <style> </style> </head> 外联:通过<head>标签中的<link >标签中链接的css样式表 js对内嵌操纵: <p style=&quo

8 loader - 配置处理css样式表的第三方loader

// 使用import语法,导入css样式表 import './css/index.css' // 注意:webpack,默认只能打包处理JS类型的文件,无法处理其它的非JS类型的文件: // 如果要处理非JS类型的文件,我们需要手动安装一些 合适 第三方loader加载器: // 1.如果想要打包处理css文件,需要安装 cnpm i style-loader css-loader -D // 2.打开webpack.config.js这个配置文件,在里面,新增一个配置节点,叫做module

网站开发综合技术 第二部分 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.内嵌样式表.

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