css第一天总结
css简介
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩,布局更加灵活自如。简单理解:CSS 可以美化 HTML , 让 HTML 更漂亮, 让页面布局更简单。 CSS 最大价值: 由 HTML 专注去做结构呈现,样式交给 CSS,即 结构 ( HTML ) 与样式( CSS ) 相分离。
如图展示:
类选择器
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器. 语法: .类名 { 属性1: 属性值1; ... }
多类名选择器
我们可以给一个标签指定多个类名,从而达到更多的选择目的。 这些类名都可以选出这个标签. 简单理解就是一个标签有多个名字.
id选择器:
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以“#" 来定义。 语法: #id名 { 属性1: 属性值1; ... } 注意:id 属性只能在每个 HTML 文档中出现一次
id选择器和类选择器的区别:
1.类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。 2.id 选择器好比人的身份证号码,全中国是唯一的,不得重复。 3.id 选择器和类选择器最大的不同在于使用次数上。 4.类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 JavaScript 搭配使用。
通配符选择器:
语法: * { 属性1: 属性值1; ... } 通配符选择器不需要调用, 自动就给所有的元素使用样式 特殊情况才使用,后面讲解使用场景(以下是清除所有的元素标签的内外边距,后期讲) * { margin: 0; padding: 0; }
css字体属性
字体:
大小: font-size:20px;
粗细: font-weight:400/700 ; (不加粗/加粗)
样式: font-style:italic; (倾斜)
字体格式 font-family:'微软雅黑';
连写 font
字体的综合写法
字体属性可以把以上文字样式综合来写, 这样可以更节约代码:
body { font: font-style font-weight font-size/line-height font-family;}
使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开 不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用
文本属性
文本颜色: color:red;
文本对齐: text-align:center; (left/right)
修饰文本(下划线): text-decoration:underline; (none) 无
文本缩进: text-indent:2em; (20px)
行间距 line-height:26px ( 行高的文本分为 上间距 文本高度 下间距 = 行间距)
外部样式表(链接式)
<link rel="stylesheet" href="css文件路径">