1.什么是css?css的全称是cascading style sheets 层叠样式表。主要用于界面的美化和布局控制。其中层叠就是多个样式可以作用在同一个HTML元素上,同时生效。
2.使用css有哪些好处?可以将内容和样式分离,降低耦合度,提高开发效率。
css必须结合html标签使用,其主要是用来修饰和美化相关标签的,其与css结合使用时,有以下三种方法。
1.内联样式 在标签体内使用style属性来指定css代码。需要注意的是css代码是由键和值中间用冒号隔开的键值对构成,键用来指定属性名,值用来指定属性值。
<div style="color:red">hello world!</div>2.内部样式 在head标签内,定义style标签,style标签体内的内容就是css代码。
<html> <head> <style> div{ color:blue; } <style> </head> <body> <body>hello world!</body> </body> </html>3.外部样式 定义css资源文件,然后head标签内定义link标签引入外部资源文件。
/* 定义外部资源文件 c.css */ div{ color:blue; } /* link标签引入外部的资源文件 */ <head> <link rel="stylesheet" herf="资源文件的相对/绝对路径"> </head>css基本语法格式:css主要需要完成的是一个选择器的定义。
选择器名称 { 属性名:属性值; 属性名:属性值; … }
1.基本选择器 (1)id选择器 语法格式:
#属性名称{ }
举例:
#div1{ color:red; } <div id="div1">hello</div>(2)元素选择器 语法格式:
标签名称{ }
举例:
<style> div{ color:green; } </style> <div> hello </div>3.类选择器 选择具有相同class属性的元素。 语法格式:
.class属性值{ }
举例:
<style> .wtu{ color:blue; } </style> <p class="wtu"> hello,wtu! </p>对于以上的基本选择器,其之间也存在优先级问题。即优先级的大小如下: id选择器 >类选择器>元素选择器
2.扩展选择器 (1)通用选择器,选择所有的选择器 语法格式:
*{ }
(2)并集选择器 语法格式:
选择器1,选择器2{ }
(3)子选择器 语法格式:
选择器1 选择器2{ }
(4)父选择器 语法格式:
选择器1>选择器2{ } //表示选定选择器2的父元素选择器1
/* 对于如下代码,只有hello world 才会变为红色 */ </style> div>p{ color:red; } </style> <div> <p>hello world</p> </div> <div> abc </div>(5)属性选择器 对带有指定属性的 HTML 元素设置样式,一般用于input输入框之类的标签。 语法格式:
元素名称[属性名=“属性值”]{ }
/* 通过此操作后,边框将会变粗 */ <style> input[type="text"]{ border:5px; } </style> <input type="text" >(6)伪类选择器 语法格式:
元素:状态{ }
/* 设置a标签的伪类选择器 对于a标签,参考w3cshool,a标签有如下几种状态: link 未访问 hover 悬浮 active 选定该链接 visited 已访问 */ <style> a:link{ color:red; //未访问时超链接的颜色为红色 } a:hover{ color:pink; //鼠标悬浮于超链接时,颜色为粉红色 } a:active{ color:blue; //鼠标点击超链接未松开时,颜色为蓝色 } a:visited{ color:green; //鼠标点击超链接完毕后,颜色为绿色 } </style> <a herf="#">超链接</a>相关标签的状态请参考w3cschool:w3cschool
(1)字体文本 front-size 字体大小,单位是像素 color 文本颜色 text-align 对齐方式 line-height 行高
(2)背景:background,可以设置图片或者颜色
/* 设置背景为图片 */ <style> div{ background:url="图片的相对/绝对路径"; } </style>(3)边框:border,设置边框
(4)尺寸:width设置宽度,height设置高度。
(5)盒子模型:主要来控制页面的布局 margin:外边距 padding:内边距。默认情况内边距会影响整个盒子的大小。比如,当我们通过内边距设置其和内部div的距离时,虽然最终会达到我们所期望的距离,但是div也会相对变大。我们可以通过设置box-sizing:borde-box;让当前width和height的值就是最终的大小,来解决此问题
float:left左浮动,right右浮动。 以上即是关于css的简单介绍,具体的知识请参考w3cschool