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

编程之家收集整理的这篇文章主要介绍了CSS——CSS基础(一篇就够用)编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

一.CSS概述

1.什么是CSS

  CSS:cascading style sheets
           层叠       样式     表

2.作用

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

3.CSSHTML属性使用原则

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

二.CSS语法规范

1.CSS使用方式

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

@L_301_89@①行内样式,内联样式

  在元素中,写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的元素,都能设置宽高(imgtable,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. 堆叠顺序对父子级元素无效,儿子永远压着父亲

解锁查看全部内容

付费后查看完整内容
限时 微信扫码支付 ¥9.9 19.9

总结

以上是编程之家为你收集整理的CSS——CSS基础(一篇就够用)全部内容,希望文章能够帮你解决CSS——CSS基础(一篇就够用)所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

CSS相关文章

谁说程序员不懂浪漫! -- 送女朋友的网页小惊喜,感动她100年。
在开发中,如果没有动画的话,整个页面内容的显示和隐藏会非常的生硬!不好看,为了给予一定的用户体验,进入今天的主题React框架本身并没有提供任何动画相关的API,所以如果需要使用的话可以使用一个第三方库react-transition-group Vue中为我们提供了一些内置的组件和对应的API来完成动画一、Transition组件的原理当插入或删除包含在transition组件中的元素时,vue将会做以下处理就是会自动把类加入到transition组件下的根元素中添加或者删..
用html、css、JavaScript做的小特效实现功能:点击下方图片可翻转到对应图片实现思路:魔方中用标签包含图片,方便用包裹,后面给ul添加3D模式便可进行翻折
毕业那天都不许给我哭,给我微笑着滚蛋。
html+css+js制作LOL官网,web前端大作业(3个页面+模拟登录+链接)
圆环进度条 两种实现方式
网页简介:经过pink老师的课程学习之后,制作了一个简单的静态页面,其中的重点内容是对所学css样式的编写格式,顺序等进行规范练习,对页面结构的规划安排,对html,css基本内容的熟练,对浮动,定位,盒子模型嵌套的运用等。
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注