theluyuan/webveuje

Fork 0

asd 9bf8e8d020 好久没更新了

2021-03-23 10:58:10 +08:00

6.4 KiB

Raw Blame History

css 基础

定义

css(层级样式表， Cascading Style Sheets) 是一种样式表语言，用来描述HTML或XML 文档的呈现，他和html一样都不是编程语言，他甚至不是标记语言，他是一门样式表语言。我们用来给html的元素选择性的添加样式

在页面中使用css

方式1（行内样式）：

在html标签中用style属性给选中元素写入css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body style="background:blue">
    <p>hello world</p>
</body>
</html>

效果如下：

方式2（内部样式表）：

在head 标签中写入 style标签，然后从style标签内写css的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background:blue
        }
        
    </style>
</head>
<body>
    <p>hello world</p>
</body>
</html>

效果如下：

方式3 （外部样式表）

从head标签中通过link 标签引入外部的css文件从而建立html文件和css文件之间的连接

link 标签中的rel=“stylesheet”必须加上

href 为url地址

type 链接文件的格式可省略省略的部分为：type="text/css"

rel属性规定当前文档与被连接文档之间的关系，但是只有值为stylesheet的时候，能够得到浏览器的支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <p>hello world</p>
</body>
</html>

效果同上：

css 语法

那让我们解读一下刚才写的css代码

body{
	background:blue
}

其中 body 叫选择器，可以选中一个或多个需要添加此样式的元素，这个例子中是body 如果要给不同的元素添加样式，只需要更改选择器部分就可以了

{} 内部的内容为规则集，css中除了选择器部分，样式相关的所有内容全部要包括在成对的大括号里（{}）

{} 中的一行为一个声明，声明由属性:属性值组成，用来指定添加样式元素的属性如本例的background:blue

声明中冒号左边的部分为属性，冒号右边的部分为属性值

重要的语法归纳：

除了选择器的部分都应该包含在成对的大括号里，即{} 里面
每个声明中要用 : 将属性名和属性值分割开
每个规则集中，要用 ; 把各个声明分割开

css选择器

基本选择器：

选择器名称	选中的内容	示例
标签选择器	页面上所有该标签的html元素	p 选中页面上所有的p标签
id选择器	具有特定id的html元素	#name 选中页面上所有或<span id=“name"> ...这种id为name 的元素
类选择器	具有特定类的元素	.box 选中页面上所有或<span class=“box">... 这种class 为box的元素
属性选择器	具有特定属性的元素	a[title] 选中页面上所有存在title属性的元素并且可以通过a[title='xxx']来匹配特定的属性值
通配符	所有元素	*
多个元素	不同选择器用 , 连接	div,span 同时匹配到页面中所有的div和span元素
选择后代元素	用空格连接 A B	div span 匹配所有div中的所有span元素
伪类：hover	a:hover	匹配所有鼠标移入状态下的a标签

css 优先级

优先级是分配给指定css声明的一个权重，只有多个样式规则赋给同一个元素而且定义的属性有冲突的时候，优先级才有意义

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

css 常用属性

width:数值 px （单位）设置宽度

height:数值 px（单位）设置高度

background: 英文颜色或者16进制颜色码（如#ff0000）或者rgb颜色码（如rgb(255,0,0)）或者图片( url('文件路径') ) 设置背景颜色

color:英文颜色或者16进制颜色码（如#ff0000）或者rgb颜色码（如rgb(255,0,0)）设置字体颜色

border: 1px solid red 1px 是边框宽度 solid 是线条类型为直线 red 为边框颜色

border-radius：29px 边框圆角

font-size：13px 字体大小

font-weight:normal(正常默认) 或者 bold(加粗)

line-height:20px 设置行高

text-align:left( 左对齐) center (居中) right(右对齐) 文字对齐方式

overflow :auto（滚动条）/ hidden (隐藏) 横向和纵向内容溢出的表现

overflow-x:auto（滚动条）/ hidden (隐藏) 横向内容溢出的表现

overflow-y:auto（滚动条）/ hidden (隐藏) 纵向内容溢出的表现

verticle-align 设置元素的垂直对齐方式属性值：

baseline 默认值，元素放置在父元素的基线上
text-top 元素顶端和父元素字体顶端对齐
text-bottom 元素顶端和父元素字体底部对齐
middle 元素位于父元素的中部 ...

6.4 KiB Raw Blame History Unescape Escape