CSS 的基本使用


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高级语法

  1. 选择器分组

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

h1,h2,h3{color:red;}
  1. 继承:
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选择器

  1. id选择器:
  • id选择器可以为标有id的HTML元素指定特定的样式
  • id选择器以"#"来定义
  1. 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

类选择器

  1. 类选择器以一个点显示
  2. 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;
}

属性选择器

  1. 对带有指定属性的HTML元素设置样式
  2. 属性和值选择器
<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选择器
  1. ID只能在文档中使用一次,而类可以使用多次
  2. ID选择器不能结合使用
  3. 当结合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;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值