CSS
carson0408
热衷于编程,喜欢研究算法,挑战难题,享受AC的过程,希望自己能够不断进步,不断成长。
展开
-
CSS之选择器及其优先级
在单纯使用HTML的过程中,设置网页每个标签元素的样式会很麻烦,对于每个标签都要进行样式设置的话,那么无疑代码量会十分庞大,尤其有很多标签的样式是相同的,代码过多的重复,冗余,使得html的代码可读性不高。因此,如果有一种方法能将一些表示样式的代码抽离出来,那么就可以解决HTML代码对样式的重复定义,提高了后期样式的可维护性。而CSS就是完美的html样式的拯救者,CSS就是指层叠...原创 2018-03-18 15:50:36 · 292 阅读 · 0 评论 -
CSS之CSS和html整合方式及优先级
CSS的使用可以将显示样式分离出来,那么CSS需要与html整合使用,就相当于将网页内容与显示样式整合在一起。CSS和html有四种整合方式,本文就详细讲解这四种整合方式。1.style样式(内联样式) style样式就是将样式直接通过style属性表达出来。<html> <head> <title>HTML示例</ti...原创 2018-03-18 16:52:40 · 1213 阅读 · 0 评论 -
CSS之盒子模型
如果将html元素看做盒子,那么在布局设计时,只需要将每个元素代表的盒子进行整体布局,这样使得布局样式更加规范。CSS盒模型本质上是一个盒子,封装周围的html元素,包括:边距,边框,填充和实际内容。如图所示,就是盒子模型的示意图,文章主要通过边框、外边距、内边距等方面的内容来介绍盒子模型。1.border border是指边框的意思。它有四个方位:top、botto...原创 2018-03-18 20:11:46 · 192 阅读 · 0 评论 -
CSS之position
之前已经讲了盒子模型,以及行元素块元素等概念,现在对于布局来说差的就是定位,所以本文将介绍position的一些属性特点,从而在为布局的时候能够提供帮助。1.relative relative是以网页的左上角为原点,然后以定义的top、left、right、bottom来确定两个维度上的正方向,所以下面通过例子来讲解:<html> <head&g...原创 2018-03-19 10:06:55 · 168 阅读 · 0 评论 -
CSS之float
1.float属性 float可以使元素向左或向右移动,其周围的元素也会重新排列。经常用于图像或者布局。本文通过示例来讲解float的使用方法。看以下代码:<!DOCTYPE html><html> <head> <title>HTML示例</title> <style type="text/css...原创 2018-03-19 19:28:33 · 300 阅读 · 0 评论