CSS笔记大集合(长期更新)

层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表、级联样式表、串接样式表、阶层式样式表,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,由W3C定义和维护。目前最新版本是CSS2.1,为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持,而下一版的CSS4仍在开发中。


(摘自维基百科“层叠样式表”:链接)

笔记比较粗略,实际上主要的应用还是在实战上。。。。


CSS是个什么鬼东西?

层叠样式表,用来修饰网页结构。让HTML代码变得更加好看。样式用来定义如何显示HTML元素。通常,样式存储在样式表中,把样式添加到HTML4.0中,是为了解决内容与表现分离的问题。不过外部样式表可以极大提高工作效率,两个文件独立运作,也比较利于维护。外部样式表通常存储在 CSS 文件中,多个样式定义可层叠为一层。

怎么用CSS?

a.在html网页上加一个style标签,在这个style标签里面写CSS代码,通过自定义名字来产生关联。

b.可以直接把style里面的代码放在一个单独的文件中,用link标签引入, div id=xxxx

c.div style=只适合少量样式,直接在html代码里写

以上三种方式都可以去设置网页的样式。

CSS的语法规则要使得html标签有具体的样式,需要具备哪些条件

style标签或者link标签或者style属性这几个都是写正确的(必须保证引入方式正确

保证CSS代码和html代码产生关联,产生关联的方法有多种,(id<==>#(代表选择器)) 学习到底有多少方法去修饰html

css里面的代码告诉浏览器要把html标签修饰成什么样子,我们需要学习各种样式修饰html

想学好CSS?无非是学好两个东西:1.如何去关联(查找到对应HTML标签),2.如何去修饰这些标签

书写CSS的规则

选择器 {  
/* 选择器:选择(查找)html标签的方法,id选择器,用#的形式来表示 */
       属性名称:属性值;
       属性名2:属性值2;
}

其实还有一种类选择器(.自定义名称)

div class="box2"

.box2 {
    ...
}

标签选择器 通过标签名称来选择对应的HTML元素

id id的名称不会出现多次 表示唯一 可以用来修饰一个唯一的元素

类 修饰同一类元素,有多个元素具有同样的样式的时候,可以用类选择器 它是可以出现多次的

标签 通过标签名称选中 特点:可以选中所有同名的标签

颜色的表示方式

颜色的表示方式

a.RGB模式

b.直接写颜色的名称

c.十六进制表示形式(#rrggbb)其实还是RGB 这个是最常用的

d.rgba(红、绿、蓝、透明度)(透明度0到1之间 1代表完全不透明)

一些设置

border-width设置边框宽度 -style边框样式 -color颜色

分辨率?在相同面积下,像素越多图像越清晰

可以简写:border: 4px solid red; solid实线 dotted 点线 dashed 虚线

只设置一条边框 border-bottom -left -right -top

圆角边框border-radius

如果参数有两个,第一个控制上左下右 第二个控制上右下左
如果三个参数 上左 上右下左 下右

设置圆:必须是一个正方形 设置椭圆 必须是一个长方形

背景 background-color repeat-x repeat-y no-repeat

块级元素与行内元素

块级元素:HTML里面的div h1 p li 等标签 独占一行 可设宽高 就算限制宽高也会充满“整行”

行内元素:span i a img input 在一行内显示 一般情况下不可以设置宽高 特殊情况下可以

行内元素转化为块级元素:转换以后可以设置宽高 display:block display:inline-block在一行内显示
display:inline 块级元素转化为行内元素

何时使用转化?主要看对宽高有没有需求

浮动

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。

很方便地进行左右布局

普通流:不使用定位 浮动等特殊css规则时,元素的自然排序规则

浮动:脱离普通流 元素可以左右移动

浮动会带来一些问题 可能会影响到后面元素的布局
解决:清除浮动分量经历nknlknklnlknnnkknkljkljkhkljkkkjhkkjkhkkjhnklnjlnlkhjnklnlhnjlknlhjkvgjhkgfjkjkhjjhjhjhjkhhjkjkhjkhjhjhjhjjkhjnhjkhkhjkkhjngl;mgbggggggggggggklghh67ujkijkhytroijjkhkyiuopeftduipkyrt4fygiufshdjgyukh6yiougf MNZXXZMNXZMNZX u汇聚各方的发挥教师的教和规范化决定是否和健康规范化加快速度放缓基本上都会警方还将根据韩国发动机发动机cvnmvdssdhjfdshjdsfhjfuijkfgsdksdffjddjghjfujduijhdfjk

(未完待续)


-------------本文结束,感谢您的阅读转载请注明原作者及出处-------------

知识无价,码字不易。对您有用,敬请打赏。金额随意,感谢关心。