CSS——CSS基础(一篇就够用)_css基础(一篇就够用)-程序员宅基地

技术标签: css  笔记  前端  sass  less  css3  

CSS——CSS基础(一篇就够用)

一.CSS概述

1.什么是css

  css:cascading style sheets
           层叠       样式     表

2.作用

  html:搭建网页的结构,承载页面的数据
  css:美化页面,修饰标签 (亚洲4大邪术)

3.css和html属性的使用原则

  html的属性只对当前标签有效,没有可重用性,导致没有可维护性
  css 具备一定的代码重用性,提高了可维护性
  但是css没有把重用性做到极致。使用scss可以做到极致
  W3C建议使用css替代html属性,如果css无法替代的属性,就使用html属性就可以了

二.CSS语法规范

1.css的使用方式

  每个样式属性之间用分号连接,例:
  color:red; 字体颜色
  background-color:yellow; 背景颜色
  font-size: 50px; 字号大小

①行内样式,内联样式

  在元素中,写style属性,在style属性中编写样式
  <元素 style="样式声明;样式声明....."></元素>

<p style="color:red;background-color:yellow;font-size: 50px;">

只对当前元素生效,代码没有可重用性
内联样式默认优先级最高
内联样式只在学习和测试中使用,项目基本不用

②内部样式

在head标签中,编写style标签,在style标签内部,编写属性
选择器{样式声明;样式声明…}
选择器:定义页面中使用这个样式的元素条件

p{
    
 color:purple;
 background-color: pink;
}

只能在当前页面中使用,项目中使用较少,
学习和测试使用较多

③外部样式

创建一个.css文件,在html中的head标签里,使用link引入

<link rel="stylesheet" href="my.css"/>

  必须有rel=“stylesheet”,代表当前文件和引入文件的关系
  项目中大量使用

2.css的样式特性

①继承性

  文本样式和字体样式的继承
  绝大多数文本字体样式,可以被继承
  a标签不会继承字体颜色

②堆叠性

  为一个标签定义多个样式规则
  如果样式属性不冲突,都会作用到这个标签上

③优先级

  默认优先级
  高 内联样式
  中 内部样式,外部样式-------就近原则
  低 浏览器默认样式
  f12关于优先级的显示
  默认情况下,f12中样式是按照默认优先级顺序从上往下显示

④调整优先级

设置最高优先级 !important,比内联都高
写在某一个值与分号之间,!important与值之间有空格
color: red !important ;
注意,内联样式不允许设置!important,语义要求

三.基础选择器

选择器,规范了页面中哪些元素能够使用当前设置的样式
就是一个条件,符合这个条件的元素都可以使用这个样式

1.通用选择器

{样式声明} (匹配所有元素,但是的效率非常低,不建议使用)
例:*{margin:0;padding:0}

2.元素选择器

标签关键字{样式声明;}
div{} p{}

3.ID选择器

<元素 id=“id值”>
#id值{样式声明}
id在一个页面中不能重复,所有id选择器只被一个元素应用

4.类选择器

使用.定义样式,哪个元素想用,用class都能调用
<元素 class=“类名”>
.类名{样式声明}

类选择器的其它用法
①.多类选择器

<元素 class="类名1 类名2 类名3.......">

②.分类选择器

元素选择器.类选择器{样式声明}
.类选择器.类选择器{样式声明}
.tooltip.show{}

③.类名的定义规范

  ①必须有.
  ②不能以数字开头
  ③只能包含- 或者_
 v④尽量见名知意

5.群组选择器

选择器1,选择器2,选择器3.....{样式声明} #d1,.c1,div,p.c2{color:red;background-color:yellow}

6.后代选择器

通过元素的后代关系,来匹配元素
后代关系:一层嵌套或者多于一层嵌套称为后代
选择器1 选择器2 选择器3{样式声明}

7.子代选择器

通过元素子代关系,来匹配元素
子代关系,一层嵌套为子代
选择器1>选择器2>选择器3{样式声明}
子代和后代选择器可以混合使用
#d1>p span{color:red;}

8.伪类选择器

匹配元素在某一个状态时的样式
只适用于a标签的伪类
①未被访问:link a:link{color:red}
②已被访问:visited a:visited{color:green}
所有元素都能用的伪类
:hover 鼠标悬停的状态
:active 激活状态
:focus 元素获取焦点时的状态(input button)

9. 选择器权值

  选择器权值,代表选择器的重要程度
  重要程度高,优先显示
  !import >1000
  内联样式 1000
  id选择器 100
  类选择器 10
  伪类选择器 10
  元素选择器 1
  通用选择器 0
  继承的样式 无
权值的特点

  1. 当一个选择器中含有多个选择器时,需要将所有的选择器权值进行相加值最大的显示
  2. 有多个选择器的权值一样大,按照就近原则
  3. 添加了!important当前css样式直接获取最高优先级
  4. 群组选择器,不相加,个算个的
  5. 选择器权值的计算,不会超过本选择器权值的最大数量级

四.尺寸和边框

1.尺寸

width: 
height: 
取值:1.px为单位的数字,rem 
	 2.% 但是如果设置高度,当前元素的父元素是body,%失效 
min-width 
max-width 
min-height 
max-height 

2.页面中允许设置尺寸的元素有哪些

具备属性,width和height的元素,都能设置宽高(img,table,td)

块级元素 行内元素 行内块(input/button)
设置宽高有效 设置宽高无效 设置宽高有效
默认宽,父元素100%
默认高靠内容撑开
宽高靠内容撑开 浏览器默认设置一个宽高
不同浏览器给的宽高不同。
一般要写兼容,css reset

3.溢出处理

overflow:visible; 溢出部分显示,默认值 
overflow:hidden;溢出部分隐藏 
overflow:scroll; 带滚动条,不管是否溢出,都添加x/y轴的滚动条 
overflow:auto; 自动, 不溢出就没有滚动条,溢出自动在溢出方向添加滚动条 
overflow-x:scroll; 单独让x轴出现滚动条 
overflow-y:scroll; 单独让y轴出现滚动条

4.边框

①边框的简写方式
同时设置4个方向的边框 
border: width style color; 
width- - - - 边框的粗细 
style - - - -边框样式 solid 实线 
					dotted 小圆点虚线 
					dashed 短线虚线 
					doubel 双实线 
color - - - -合法颜色,transparent 
取消边框 border:none / 0 ; 
最简方式 border: style; border:solid;
②单边的设置
border-top: 20px solid #f00; 
border-right: 20px dotted #00f; 
border-bottom: 20px dashed #0ff; 
border-left: 20px double #f0f; 
取消某个边框 
border-top: 0; 
border-right: 0; 
border-bottom: 0; 
border-left:0;
③单属性设置
border-width: 100px; 
border-style: solid; 
border-color: #CCFF00;
④单边单属性
border-top-width:  上边框宽度
border-top-style:  上边框样式
border-top-color:  上边框颜色
border-right-width: 
border-right-style: 
border-right-color: 
border-bottom-width: 
border-bottom-style: 
border-bottom-color: 
border-left-width: 
border-left-style: 
border-left-color:

5.边框的倒角(圆角)

把直角倒成圆角 
border-radius:圆角的半径 
取值:1.px为单位的数字 
	 2.% 50%就是圆 
单角的定义,圆角之间会相互影响 
border-top-right-radius:; 
border-bottom-right-radius:; 
border-top-left-radius:; 
border-bottom-left-radius:;

6.元素阴影

box-shadow: h-shadow v-shadow blur spread color; 
h-shadow x轴偏移量 
v-shadow y轴偏移量 
blur 阴影模糊程度 
spread 阴影大小 
color 阴影颜色 
inset 内部阴影

7.轮廓

  多用于修饰文本框和按钮
  绘制于边框外部一圈线条,不占页面空间
  一般我们会把轮廓清除掉

outline:width style color; 
outline:0; 

五.盒子模型

默认盒子模型计算公式:
元素占地宽度:
左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
元素占地高度:
上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距

1.外边距 margin

①语法:
margin:v1; 同时设置4个方向外边距 
margin-top: 
margin-right: 
margin-bottom: 
margin-left: 

取值:

  1. px为单位的数字
  2. % 上右下左都是父元素宽的百分比
  3. auto 上下外边距无效 让块级元素本身在当前父元素内水平居中
②简写方式:
margin:v1; 同时设置4个方向 
margin:v1 v2; v1为上下 v2为左右 
margin:v1 v2 v3; v1上 v2左右 v3下 
margin:v1 v2 v3 v4; 上 右 下 左 123
③margin自我冲突

  左右冲突,以左为准
  默认布局的元素:不要用右外边距设置元素的水平位移,用左外边距设置位移
  右外边距值负责控制当前元素与后面元素的距离

2.外边距的特殊情况

①外边距的合并

  两个垂直边距相遇时,会合并成一个,值以大的为准
解决方案:

  1. 只写一个元素的上边距,或者另一个元素的下外边距
  2. 页面设计的时候规避
②完整的块级元素、行内元素、行内块的总结
块级元素 行内元素 行内块
设置宽高有效 设置宽高无效 设置宽高有效
默认宽:父元素%100
默认高:靠内容撑开
宽高靠内容撑开 浏览器默认设置一个宽高
4个方向外边距都有效 上下外边距无效 4个方向外边距都有效
改变行内块上外边距
行内块会带着同一行的其他行内元素/行内块一起位移
③默认自带外边距的元素

  p , h1~h6 , ul , ol
  body 4个方向8px
  ul 上下外边距16px 左内边距40px

④外边距溢出

在特殊情况下,子元素的上外边距会作用到父元素上
特殊情况

  1. 父元素没有上边框
  2. 子元素内容区域的上沿与父元素内容区域的上沿重合
    解决方案
  3. 给父元素上上边框,增加了父元素的实际占地高度
  4. 给父元素添加上内边距,增加了父元素的实际占地高度
  5. 给父元素设置overflow:hidden/auto, 如果想溢出显示,就不行了
  6. 给父元素添加一个大儿子,一个空

3.内边距 padding

①语法
padding:v1; 
padding:v1 v2; 
padding:v1 v2 v3; 
padding:v1 v2 v3 v4; 
padding-top; 
padding-right; 
padding-bottom; 
padding-left; 

取值:

  1. px为单位的数字
  2. % 父元素宽度的百分比
  3. 内边距不能设置auto

4.设置盒子模型的计算方式

box-sizing:
content-box默认值,设置的width为内容区域宽度
   左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
border-box 设置的width包含(左边框+左内边距+内容区域+右内边距+右边框)
   左外边距+width+右外边距
width设置百分比的时候,一般使用border-box比较好控制

六.背景

1.背景颜色

background-color : 合法颜色值; 背景颜色 
background-image : url(img/02.png); 背景图片 
background-repeat: repeat; 背景图片的平铺 
					no-repeat 不平铺 
					repeat-x 设置x轴平铺 
					repeat-y 设置y轴平铺

2.背景图片的定位

background-position: 

取值:

  1. x y 分别设置x轴和y轴
    以px为单位的数字
    关键字 x:left/center/right y:top/center/bottom
  2. 一个值 只设置x轴,y轴默认居中
background-size: 

取值:

  1. 两个值设置宽高 px为单位的数字
  2. 一个值同时设置宽高
  3. contain 图片根据元素尺寸自动等比缩放,正好全部显示图片
  4. cover 图片根据元素尺寸自动等比缩放,正好把元素铺满

3.简写方式

background:color img repeat position;

简写方式没有size。size需要单写

4.最简方式

background:color / img;

七.渐变

1.线性渐变

background-image: linear-gradient(方向,色标1,色标2……);

取值:方向

  1. 写终点
to top
to right
to bottom
to left
  1. 写角度
    0deg

色标
   颜色+位置

  1. %
  2. px
  3. 不写位置只写颜色

2.径向渐变

background-image: radial-gradient(半径 at 圆心x 圆心y,色标1,色标2…….);

取值
圆心

  1. px为单位的数字
  2. %
  3. 关键字 X:left/center/right Y:top/center/bottom

色标
位置为%,是半径长度的%

3.重复渐变

background-image: repeating-radial-gradient(100px at centercenter,#000 0%,#0ff 2%);

4.线性渐变的浏览器兼容问题

-webkit- chrome safari
-o- 欧朋浏览器
-moz- 火狐浏览器
-ms- IE浏览器

八.文本格式化

1.字体属性

字体大小

 font-size: px 、rem 、 pt 

字体系列

font-family:系列1,系列2,…… 

字体加粗

font-weight: lighter 300 normal 400 bold 600 bolder 700 

字体样式

font-style:normal 没样式 
				italic 斜体 

小型大写字母

font-variant: small-caps;

字体的简写方式

font: style variant weight size fmily; 一定按照顺序写 
font: italic small-caps bold 36px "mv boli"; 

最简方式

font:size family;

2.文本属性

文本颜色 color:
文本的堆砌方式

text-align:left; 左对齐 
				right 右对齐 
				center 居中
 				justify 两端对齐

text-align:center 的细节 : 让内部的文本、行内、行内块水平居中 内部块级元素会继承,但不会让块级元素居中
margin:0 auto; 让当前块级元素水平居中
line-height垂直对齐方式——行高
一般会把行高设置为容器高度,让文本在容器中垂直居中
取值
line-height:

  1. px为单位的数字
  2. 无单位的数字,代表字号的倍数
    一般只对一行文本设置行高,设置多行文本使用内边距算!!!
    文本线条修饰
text-decoration:underline; 下划线 
				overline 上划线 
				none 删除所有线条 
				line-through 删除线 

首行缩进

text-indent: px为单位的数字 

文本阴影

text-shadow:h-shadow v-shadow blur color;

九.表格的样式

1.表格的常用样式

table
   尺寸、边框、背景、文本、内外边距都有效
td/th
   高度正常使用,宽度靠内容撑
   边框、背景、文本、内边距都有效 外边距无效

2.表格的专属样式

td/th属性
   vertical-align:top/middle/bottom
   设置td/th中文本的垂直对齐方式
table的属性

  1. 边框合并
border-collapse:separate; 默认值,边框分离状态 
				collapse 边框合并 
  1. 边框之间的距离,前提边框处于分离状态
border-spacing:20px; 
  1. 边框标题
caption-side:top; 标题在表格上面 
			bottom 标题在表格下面

4.设置表格显示规则

表格自动布局(默认布局) 表格的固定布局
table-layout:auto table-layout: fixed;
单元格尺寸会自动适应内容 单元格大小取决设置的尺寸
比较灵活 表格不够灵活
表格越大,加载速度越慢 任何情况,加载速度都快
适用于不确定每列大小并且不复杂的表格 适用于确定每列大小的表格

十.浮动定位

float:none; 默认值,不浮动 
	  left 左浮动 
	  right 右浮动 

右浮动必须使用margin-right进行位移
没有定义宽度的元素,脱离文档流之后,宽度靠内容撑开
元素一旦脱离文档流,会变成块级元素
清除浮动带来的影响

clear:left; 清除左浮带来的影响 
	  right 清除右浮带来的影响 
	  both 同时清除左右浮动的影响

解决高度坍塌

  1. 给父元素设置高度(适合元素较少的情况下)
  2. 给父元素也设置浮动(会影响父元素的兄弟元素以及父元素的父元素,完全不能用
  3. overflow:hidden/auto;(不能溢出显示了)
  4. 给父元素添加一个空的块级元素当做小儿子,并给小儿子设置clear:both;

十一.其他重要样式属性

1.显示方式

display:block; 让元素按照块级元素去显示 
display:inline; 让元素按照行内元素去显示 
display:inline-block; 让元素按照行内块方式显示 
display:table; 让元素按照表格的方式显示 
display:none; 隐藏,脱离文档流的隐藏

2.显示效果

visibility:visible; 默认值,显示 
visibility:hidden; 隐藏,不脱离文档流的隐藏 

visibility:hidden;和display:none;的区别
    visibility:hidden是不脱离文档流的隐藏
    display:none是脱离文档流的隐藏

3.透明度

opacity:0.5; 取值0~1 0全透明,1不透明
opacity和rgba的区别
     rgba只改变当前颜色的透明度
     opacity元素以及元素后代所有与颜色相关的都会变透明

4.垂直对齐方式

vertical-align:
使用场合
 ①表格th/td
   控制内部内容垂直对齐方式 top/middle/bottom
 ②行内块
   控制行内块前后行内元素、行内块元素、文本的垂直对齐方式
   top/middle/bottom 默认值middle
 ③img
   控制img和前后行内元素、行内块元素、文本的垂直对齐方式
   top/middle/bottom/baseline 默认值 baseline基线

5.光标的管理

设置属性之后,会直接调用操作系统的默认光标

cursor:default; 默认值 小箭头 
cursor:pointer; 小手 
cursor:text; 提示文本输入 的 I 
cursor:wait; 等待加载 
cursor:help; 帮助 
cursor:crosshair; 十字

6.列表的样式

list-style-type:disc; 实心圆 
				square; 实心小方块 
				circle;空心圆 
				none; 去除列表标识项 
list-style-image: 
list-style-position:outside; 默认值,在li外侧显示列表标示 
					inside; 在li中显示列表标识 

简写方式

list-style:type URL position; 
list-style:none; 最简方式,清除列表标识项

十二.定位

相对定位、绝对定位、固定定位
position:static 默认值 默认文档流
relative 相对定位
absolute 绝对定位
fixed 固定定位
注意:元素一旦设置了position,并且取值为relative/absolute/fixde其中一种时

  1. 这个元素被称为已定位元素
  2. 解锁四个方向的定位属性:top / right / bottom / left
    左右冲突以left为准
  3. 会解锁堆叠属性z-imdex

1.相对定位

position:relative; 配合偏移属性
不脱离文档流,不影响周围元素
如果一个元素设置了相对定位,并且不写偏移属性,这个元素对页面没有任何影响
如何偏移:相对自己原先位置偏移
使用场合:
  ①做元素位置的微调
  ②作为绝对定位的祖先级已定位元素

2.绝对定位

position:absolute;配合偏移属性
绝对定位,脱离文档流
如何偏移:
  ①如果元素没有已定位的祖先元素,绝对定位元素相对body左上角进行偏移
  ②以“最近的”“已定位的”“祖先级”元素左上角做偏移,子绝父相
使用场合:页面布局中使用,可以让页面移动到页面的任何位置

3.固定定位

position:fixed; 配合偏移属性
如何偏移:相对于body左上角
使用场合:把元素永远固定在页面可视区域的一个位置

4.堆叠顺序

z-index:
注意事项

  1. HTML代码中后写的元素堆叠顺序高
  2. z-index:默认值大于0小于1
  3. 浮动在第几层 小于0 大于-1
  4. 只有已定位的元素才能设置堆叠
  5. 堆叠顺序对父子级元素无效,儿子永远压着父亲
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_47511959/article/details/118152956

智能推荐

Redis3.0 Cluster Redis集群搭建_redis3.0cluster部署-程序员宅基地

文章浏览阅读4.5k次。一、介绍Redis 集群是一个提供在多个Redis间节点间共享数据的程序集.redis3.0以前,只支持主从同步的,如果主的挂了,写入就成问题了。而官方的Redis Cluster出来后就可以很好帮我们解决这个问题;可以做到节点的自动发现、集群容错slave->master、人为操纵分片(slots)等等Redis Cluster 架构架构细节:_redis3.0cluster部署

通用的预训练模型:All NLP Tasks Are Generation Tasks: A General Pre-training Framework_all nlp tasks are generation tasks: a general pret-程序员宅基地

文章浏览阅读1.6k次,点赞2次,收藏7次。最近在arxiv上又看到了一篇论文,出自清华大学。题目为:All NLP Tasks Are Generation Tasks: A General Pretraining Framework。0.摘要NLP任务分为分类或者说是阅读理解任务(NLU)、无条件生成任务、有条件生成任务;预训练模型分为自编码、自回归、编码解码。三种训练模型分别在前面三种任务中表现良好。本文中提出一个通用的预训练模型,在三种任务中都能做到良好表现。 ..._all nlp tasks are generation tasks: a general pretraining framework

textview constrain count-程序员宅基地

文章浏览阅读199次。TextView里限制输入字数的方法2011-05-12 10:50 8353人阅读 评论(0) 收藏 举报联想 一开始采用的方法是函数textView:shouldChangeTextInRange:replacementText:来进行判断:[c-sharp] view plaincopy //键入Done时,插入换行符,然后执行addBookmark - (BOO

MarkdownPad2无法预览Markdown文档问题的解决_还原 markdown 预览时出现意外错误。-程序员宅基地

文章浏览阅读1.2k次。问题描述  安装MarkdownPad2后打开一个markdown文档,在预览markdown文档出现下面错误:问题分析  官方的文档给出如下说法:This issue has been specifically observed in Windows 8. You may see an error message as shown here, and no HTML will be rendered when you type in the Markdown Editor pane.To fix _还原 markdown 预览时出现意外错误。

CentOS7安装nginx_centos编译nginx 1.25-程序员宅基地

文章浏览阅读629次。系统版本:centos7.9-2009nginx版本:1.20.21、去nginx官网下载压缩包,此处选择稳定版本nginx官网链接2、上传到服务器指定位置/opt/tools,根据个人习惯来解压:tar -zxvf nginx-1.20.2.tar.gz3、配置,使用默认配置解压后进入到nginx目录下,执行:./configure可能会出现一些错误提示错误1:./configure: error: C compiler cc i.._centos编译nginx 1.25

使用influx控制台工具操作InfluxDB-程序员宅基地

文章浏览阅读106次。这里记录下influx控制台的简单使用,如需更多功能请参考InfluxDB官方文档:https://docs.influxdata.com/influxdb/v1.1/ 环境: CentOS6.5_x64InfluxDB版本:1.1.0 准备工作 启动服务器 执行如下命令:..._influxdb控制台怎么打开

随便推点

Application Developer-程序员宅基地

文章浏览阅读91次。Title: Application Developer Location: Shenzhen,China..._application developer是干什么的

hdoj进制转换-程序员宅基地

文章浏览阅读712次。进制转换 Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other)Total Submission(s) : 14 Accepted Submission(s) : 12Font: Times New Roman | Verdana | Georgia Font Size:_hdoj进制转换

一维激波管(Lax shock tube)问题的数值求解_一维激波管大作业-程序员宅基地

文章浏览阅读1.4w次,点赞18次,收藏88次。一维激波管(Lax shock tube)问题的数值求解文章目录一维激波管(Lax shock tube)问题的数值求解@[toc]问题描述一般的守恒算法格式精确解常用守恒格式(先介绍标量)Lax-Friedrichs格式Roe格式Lax-Wendroff格式ENO格式简介(先介绍标量)5阶WENO格式空间离散Lax-Friedrichs通量分裂原函数方法重构左值右值空间算子和时间三阶Rung..._一维激波管大作业

appserv访问http://localhost/phpMyAdmin没有响应的问题-程序员宅基地

文章浏览阅读222次。appserv访问http://localhost/phpMyAdmin 没有响应的问题 只需要修改hosts文件就好了 在C:\Windows\System32\drivers\etc文件夹下有个hosts文件, 用记事本打它,去掉倒数第二行(当然不一定都是这个位置,只要..._phpmyadmin localhost 发送的响应无效

vmware安装无法打开内核设备 \\.\Global\vmx86: 系统找不到指定的文件_无法打开内核设备“\\.\global\vmx86”: 系统找不到指定的文件。您在安装 vmware-程序员宅基地

文章浏览阅读387次。下面转载一篇虚拟机遇到“vmware安装无法打开内核设备 \.\Global\vmx86: 系统找不到指定的文件”问题的解决办法*****问题原因:是虚拟机服务没有开启解决方法:(以管理员的方式运行)点击“开始→运行”,在运行框中输入 CMD 回车打开命令提示符,然后依次执行以下命令net start vmcinet start vmx86net start VMnetuserif..._无法打开内核设备“\\.\global\vmx86”: 系统找不到指定的文件。您在安装 vmware

Redis字典数据结构-程序员宅基地

文章浏览阅读52次。字典节点。key/value结构。 typedefstructdictEntry{void*key;union{void*val;uint64_tu64;int64_ts64;..._redis字典这个数据结构,除了主数据库的k-v