02-CSS

1、介绍

CSS

层叠样式表,作用:渲染页面,提高工作效率。
格式:选择器{属性:值;属性1:值1;}
后缀名:.css 独立的css(样式)文件
和 HTML 元素的整合 ★ :

  • 方式1:内联样式表,通过标签的 style 属性设置样式,例如:<div style="background-color: #FF0000;"></div>
  • 方式2:内部样式表,在当前页面中使用的样式,例如
1
2
3
4
5
<style>
#divId2{
background-color: #0f0;
}
</style>
  • 方式3:外部样式表,有独立的css文件,通过 head 标签的 link 子标签导入,例如 <link rel="stylesheet" href="css/1.css" type="text/css"/>

2、选择器 ★

  • id 选择器
    要求: html 元素必须有 id 属性且有值 <xxx id="id1"></xxx> ;css 中通过”#”引入,后面加上id的值 #id1{...}

  • 类选择器:
    要求:html 元素必须有 class 属性且有值 <xxx class="cls1"/>;css 中通过”.”引入,后面加上class的值 .cls1{...}

  • 元素选择器:
    直接用元素(标签)名即可 xx{...} 例如:div{ }

  • 属性选择器:
    html 元素有一个属性且有值 <xx att="val1">,css 中通过元素名[属性=”值”]使用 xx[att="val1"]{...} 例如:xxx[nihao="wohenhao"]{....}

  • 后代选择器:
    选择器 后代选择器{...}:在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式。

  • 锚伪类选择器:(了解)

    ​ a:link {color: #FF0000} / 未访问的链接 /

    a:visited {color: #00FF00}    /* 已访问的链接 */
    a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
    a:active {color: #0000FF}    /* 选定的链接 */
    

选择器使用小结:

  • id选择器:一个元素(标签)
  • 类选择器:一类元素
  • 元素选择器:一种元素
  • 属性选择器:元素选择器的特殊用法

使用的时候注意:

  • 若多个样式作用于一个元素的时候:
    • 不同的样式,会叠加
    • 相同的样式,最近原则
  • 若多个选择器作用于一个元素的时候:
    • 越特殊优先级越高,id 优先级最高

3、样式

字体:

  • font-family:设置字体(隶书) 设置字体家族
  • font-size::设置字体大小
  • font-style:设置字体风格

文本:改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进

  • color:文本颜色
  • line-height:设置行高
  • text-decoration: 向文本添加修饰。 none underline
  • text-align:对齐文本

列表:

  • list-style-type:设置列表项的类型 例如:a 1 实心圆
  • list-style-image:设置图片最为列表项类型 使用的时候使用 url函数 url("/i/arrow.gif");

背景:

  • background-color:设置背景颜色
  • background-image:设置图片作为背景 url

尺寸:

  • width:宽度
  • height:高度

浮动:

  • float:可选值 left、right

分类:

  • clear:设置元素的两边是否有其他的浮动元素,值为 both 两边都不允许有浮动元素
  • display:设置是否及如何显示元素。
    • none 此元素不会被显示。
    • block 此元素将显示为块级元素,此元素前后会带有换行符。
    • inline 默认,此元素会被显示为内联元素,元素前后没有换行符。

4、框模型(理解)

一个元素外面有 padding(内边距)、border(边框)、margin(外边距)

  • padding:元素和边框的距离
  • margin:元素最外层的空白

在网上找了两幅图片:

这里写图片描述

这里写图片描述

上面这三个属性都有简写的属性,若设置大小的时候,四个值顺序为:上右下左
eg:padding:10px 10px 10px 10px

  • 若只写一个的话 代表四个边使用同一个值 padding:10px
  • 若只写两个个的话 代表四个边使用同一个值 padding:10px 20px
  • 若只写三个个的话 代表四个边使用同一个值 padding:10px 20px 30p

border(边框):可以设置颜色 风格
简写属性:border:宽度 风格 颜色; eg:border:5px solid red;
说明:solid:实线,dashed:虚线,double:双实线

觉得文章对您有帮助请我喝杯咖啡吧^_^
0%