CSS 的基本使用_p{font-family:"sans serif"}-CSDN博客

本文链接：https://blog.csdn.net/LAWTED/article/details/113860457

title: CSS基础
date: 2021-01-28 11:23:46
tags: 技术

CSS概述

CSS指层叠样式表

一般格式
selector{
	property:value
}

例如：
h1{color:red; font-size:14px;}

属性大于1个，属性之间要用分号隔开
如果值大于1个单词，则需要加上引号：
p{font-family:"sans serif"}

CSS高级语法

选择器分组

可以给多个元素加上同一个样式

h1,h2,h3{color:red;}

继承：

body{
	color:green;
}

body里面的样式，如果没有自己的样式就用这个

派生选择器

通过依据元素在其位置的上下文关系来定义样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
  <p><strong>hello css</strong></p>
  <ul>
    <li><strong>标签</strong></li>
  </ul>
</body>
</html>

li strong{
  color:red;
}
strong{
  color:blue;
}

第一个改变了li strong的颜色，第二个因为li strong更细，就只改变第一个文本

id选择器

id选择器：

id选择器可以为标有id的HTML元素指定特定的样式
id选择器以"#"来定义

id选择器和派生选择器：

常用的方式是id选择器用于建立派生选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
  <p id="a1">hello css<a href="http://www.baidu.com">百度</a></p>
  <div id="divid">这是一个div</div> 
</body>
</html>

#a1 a{
  color:red;
}
#divid{
  color:blue;
}

id不使用数字开头，第一个是派生和id同时使用，第二个是id

类选择器

类选择器以一个点显示
class也可以用作派生选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
  <p class="pclass">我的第一个段落。<a>你好</a></p>
  <div class="divclass">hello div</div>
</body>
</html>

.pclass a
{
  color:red;
}
.divclass{
  color:purple;
}

属性选择器

对带有指定属性的HTML元素设置样式
属性和值选择器

<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
 <style type="text/css">
   [title]{
     color:blue;
   }
   [title=t]{
     color:red;
   }
  </style>
</head>
<body>
	<h1 title>我的第一个HTML页面</h1>
	<p title="t">我的第一个段落。</p>
</body>
</html>

如果没有值，则按属性选择器显示，如果有值则按照属性和值选择器显示

背景

background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-color      设置元素的背景颜色
background-image      把图片设置为背景
background-position   设置背景图片的起始位置
background-repeat     设置背景图片是否以及如何重复
background-size       规定背景图片的尺寸
background-origin     规定背景图片的定位区域
background-clip       规定背景的绘制区域

文本

color            文本颜色
direction        文本方向
line-height      行高
letter-spacing   字符间距
text-align       对齐元素中的文本
text-decoration  向文本添加修饰
text-indent      缩进元素中的文本首行
text-transform   元素中的字母
unicode-bidi     设置文本方向
white-space      元素中空白的处理方式
word-spacing     字间距
text-shadow      向文本添加阴影
text-wrap        规定文本的换行规则

字体

font-family     设置字体系列
font-size       设置字体的尺寸
font-style      设置字体风格
font-variant    以小型大些或正常字体显示文本
font-weight     设置字体的粗细

链接

a:link         普通的、未被访问的链接
a:visited      用户已访问的链接
a:hover        鼠标指针位于链接上方
a:active       链接被点击的时刻
text-decoration用于去掉链接中的下划线
background-color

设置text-decoration:none

列表

list-style           简写列表项
list-style-image     列表项图像
list-style-position  列表标志位置
list-style-type      列表类型

表格

border            边框
boder-collapse    合并边框
width             宽
height            高
text-align        对齐

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
	<table id="tb">
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
      <tr class="hao">
        <td>吴明泽</td>
        <td>20</td>
        <td>男</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>12</td>
        <td>男</td>
      </tr>
      <tr class="hao">
        <td>小周</td>
        <td>20</td>
        <td>女</td>
      </tr>
  </table>
</body>
</html>

#tb{
  border-collapse:collapse;
  width:200px
}
#tb td{
  border:1px solid black;
  padding: 5px;
}
#tb th{
  text-align:center;
  background-color:black;
  color:white;
}
#tb tr.hao td{
  color:red;
  background-color:grey;
}

轮廓

outline       设置轮廓属性
outline-color 设置轮廓颜色
outline-style 设置轮廓样式
outline-width 设置轮廓宽度

定位

CSS定位
** 改变元素在页面上的位置
CSS定位机制
** 普通流：元素按照其在HTML中的位置顺序决定排布的过程
** 浮动：
** 绝对布局

position       把元素放在一个静态的、相对的、绝对的、固定的位置中
top            元素向上的偏移量
left           元素向左的偏移量
right          元素向右的偏移量
bottom         元素向下的偏移量
overflow       设置元素溢出其区域发生的事情
clip           设置元素显示的形状
vertical-align 设置元素垂直对齐方式
z-index        设置元素的堆叠顺序

CSS position属性

static
relative
absolute
fixed 随着页面动

CSS z-index属性

z-index: 1;
谁的值大，谁在前面

浮动

float属性可用的值：

left:元素向左浮动
right：元素向右浮动
none：元素不浮动
inherit：从父级继承浮动属性

clear属性

去掉浮动属性
clear属性值：
	left、right：去掉元素向左、向右浮动
	both：左右两侧均去掉浮动
	inherit：从父级继承来的clear属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
  <div id="container"><div id="fd"></div>
  <div id="sd"></div>
  <div id="td"></div>
    <div id="text">hello world</div>
  </div>
</body>
</html>

#fd{
  width:50px;
  height:50px;
  background-color:red;
	float:left;
}
#sd{
  width:50px;
  height:50px;
  background-color:blue;
  float:left;
}
#td{
  width:50px;
  height:50px;
  background-color:green;
  float:left;
}
#text{
  clear:left;
}
#container{
  width:100px;
  height:500px;
  background-color:grey
}

盒子模型

margin、boder、padding、content部分组成

内边距

padding             设置所有边距
padding-bottom      设置底边距
padding-left        设置左边距
padding-right       设置右边距
padding-top         设置上边距(px)

边框

border-style          边框样式
border-top-style
border-left-style
border-right-style
border-bottom-style

border-width          边框宽度
bottom-top-width
bottom-left-width
bottom-right-width
bottom-bottom-width

border-color          边框颜色
bottom-top-color
bottom-left-color
bottom-right-color
bottom-bottom-color

border-radius         圆角边框
box-shadow            边框阴影(10px 10px 5px red)
border-image          边框图片

外边距

margin                设置所有的边距
margin-bottom         设置底边距
margin-left           设置左边距
margin-right          设置右边距
margin-top            设置上边距

外边距合并

两个盒子的外边距会合并，按照边距多的合并

对齐操作

使用margin属性进行水平对齐（margin：0px auto）
使用position属性进行对齐
使用float属性进行对齐

分类

尺寸操作

height            设置元素高度
line-height       设置行高
max-height        设置元素最大高度
max-width         设置元素最大宽度
min-width         设置元素最小宽度
min-height        设置元素最小高度
width             设置元素宽度

分类操作

clear             设置一个元素的侧面是否允许其他的浮动元素
cursor            规定当指向某元素之上时显示的指针类型
display           设置是否及如何显示元素
float             定义元素在哪个方向浮动
position          把元素放置到一个静态的、相对的、绝对的固定的位置
visibility        设置元素可见或者不可见

导航栏

垂直导航栏

ul{
  list-style-type:none;
  margin:0px;
  padding:0px;
}
a:link,a:visited{
  text-decoration:none;
  display:block;
  background-color:red;
  width:50px;
  text-align:center
}
a:active,a:hover{
  background-color:blue;
}

水平导航栏

ul{
  list-style-type:none;
  margin:0px;
  padding:0px;
}
a:link,a:visited{
  text-decoration:none;
  display:block;
  background-color:red;
  width:50px;
  text-align:center
}
a:active,a:hover{
  background-color:blue;
}

li{
  float:left;
  padding:3px;
  font-size:20px;
  font-weight:bold;
}

图片

opacity:0.5;        透明度

选择器

元素选择器

例如
h1{}
a{}

选择器分组

例如
h1,h2{}
同配符
*{}

类选择器详解

1.类选择器
.class{}

2.结合元素选择器
a.class{}

3.多类选择器
.class.class{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
	<p class="p1">我的第一个段落。</p>
  <p class="p2">我的第一个段落。</p>
  <p class="p1 p2">我的第一个段落。</p>
</body>
</html>

.p1{
  font-size:30px
}
.p2{
  color:red;
}
.p1.p2{
  background-color:lightblue;
}

id选择器

ID只能在文档中使用一次，而类可以使用多次
ID选择器不能结合使用
当结合js的时候，需要使用id

属性选择器

[title]{}
[title~="title"]{}      包含title都会变化

<p title="title">你好</p>
<p title="title hello">你好</p>

后代选择器

<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
  <p>我的<strong>第一个</strong>段落。</p>
</body>
</html>

p strong{
  color:red
}

可以很多层

子元素选择器

p>strong{
 color:red;
}

只能一层

相邻兄弟选择器

没什么用

3D转换

2D转换方法
translate()
-webkit-transform:translate(100px,100px);    //safari chrome

rotate()
transform:rotate(60deg);

scale()
transform:scale(1,2);                     //宽高度的倍数

skew()
transform:skew(50deg,50deg);               //绕着X轴倾斜，绕着Y轴倾斜

matrix()

3D转换方法
rotateX(deg)
rotateY(deg)

过渡

transition                 设置四个过渡属性
transition-property        过渡的名称
transition-duration        过渡效果花费的时间
transition-timing-function 过渡效果的时间曲线
transition-delay           过渡效果开始时间

动画

div{
	animation: anim 5s infinite alternate;
}

@keyframes{
	0%{background:red; left:0px;top:0px}
	25%{background:red; left:0px;top:0px}
	50%{}
	75%{}
	100%{}
}

多列

column-count
column-gap
column-rule

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
  <div class="div1">
    大家好，我是小周！
    大家好，我是小周！
    大家好，我是小周！
    大家好，我是小周！
    大家好，我是小周！
    大家好，我是小周！
    大家好，我是小周！
    大家好，我是小周！
    大家好，我是小周！
  </div>
</body>
</html>

.div1{
  column-count:3;
  column-gap:10px;
  column-rule:5px outset red;
}

CSS瀑布流效果

.container{
  column-width:250px;
  column-gap:5px;
}
.container div{
  width:250px;
  margin:5px o;
}
.container p{
  text-align:center;
}

CSS 的基本使用

title: CSS基础 date: 2021-01-28 11:23:46 tags: 技术

CSS概述

CSS高级语法

派生选择器

id选择器

类选择器

属性选择器

背景

文本

字体

链接

列表

表格

轮廓

定位

CSS position属性

CSS z-index属性

浮动

盒子模型

内边距

边框

外边距

外边距合并

对齐操作

分类

尺寸操作

分类操作

导航栏

垂直导航栏

水平导航栏

图片

选择器

元素选择器

选择器分组

类选择器详解

id选择器

属性选择器

后代选择器

子元素选择器

相邻兄弟选择器

3D转换

过渡

动画

多列

CSS瀑布流效果

title: CSS基础
date: 2021-01-28 11:23:46
tags: 技术