CSS #基础选择器 #溢出处理 #阴影 #轮廓 #盒子模型 #背景 #渐变属性 #字体属性 #文本属性 #表格

CSS基础知识

1.css的使用方式(内联样式  内部样式 外部样式);
(1)内联样式 <元素 style="color:red;font-size:12px">内联样式</元素>  特点:样式不能重用 只对当前元素有效 默认优先级最高
(2)内部样式<head>标签中添加<style></style>  选择器{样式1;样式2}   特点:内部样式可以重用 仅在当前页面使用
(3)外部样式 单独创建.css文件  哪个html需要在head中link引入文件     特点:样式可以重用广泛
<!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="my.css">
    <style>
    	#d1{
			color:pink;
			font-size:14px;
		}
    </style>
    <link rel="stylesheet" href="">
</head>
<body>
    <div style="color:red;font-size:12px">内联样式</div>
    <div id="d1">内部样式</div>
    <div id="d3">外部样式</div>
</body>
</html>

CSS的特点

2.css的特点
(1)继承性  :外层标签的样式会被内层使用
(2)层叠性 :为元素定义多种样式声明 不会冲突 如果样式重复根据优先级执行
(3)优先级 :如果为一个元素定义多个样式,样式中发生了冲突高   内联样式内部样式和外部样式   低 浏览器默认样式
(4)调整默认优先级 :在样式取值和分号之间添加关键字!important

基础选择器

1.通用选择器
*{margin:0;padding:0}所有内外边距清0
*{box-sizing:border-box}改变所有元素的盒子模型计算方式
由于不同浏览器厂商给元素的默认样式不同,所有开发之前,要进行清除和统一
这个行为叫做写css  reset  样式重置

2.标签选择器,元素选择器
标签的关键字{样式声明;}  div{color:red;}

3.根据元素id值,来匹配元素  <任意元素  id="d1">    #d1{样式声明;}

4.把常用样式封装进类选择器中    .类名{样式;}  <任何元素 class="类名  类名1  类名2">

5.类选择器的变种     1.同时调用多个类名的元素要执行某个样式.类名1.类名2{样式声明}   .font-36.bg-pink{color:yellow;}
					2.匹配应用某个类名的具体元素    元素选择器.类选择器{样式声明}  div.bg-pink{font-size:100px;}

6.群组选择器   使用逗号分割,让多个选择器使用同一个样式  h1,h2,h3,h4,h5,h6{margin:o;}

6.后代选择器  根据元素的后代关系来匹配元素  选择器  选择器   选择器   ......{样式声明}   空格是后代 隔多少层都可以

8.子代选择器   根据元素的子代关系匹配元素  #content>p>span{color:red;}

9.伪类选择器
描述某个元素在某种特殊状态的样式
/* 连接未被访问时的状态 */
a:link{color: red;}
/* 连接已被访问过的状态 */
a:visited{color:gray}
/* 鼠标悬停在元素上时的状态 */
a:hover{font-size: 32px;color: purple;}
/* 元素被激活时的状态 */
a:active{color:green;}
/*匹配元素获取焦点时的样式*/
:focus{样式声明}

overflow 溢出处理

overflow:  visible;默认值
		   hidden; 溢出隐藏
		   scoll;  不管是否溢出都添加滚动条
		   auto;  只有溢出的时候才增加滚动条
		   overflow-x
		   overflow-y   可以单独设置x/y轴是否添加滚动条

box-shadow 阴影

box-shadow:  0 0 0 0 
h-shadow      阴影水平偏移距离   
v-shadow      垂直偏移距离
blur          扩散距离,模糊程度
spread        阴影大小
color         颜色
inset         内部阴影,不写就是外部阴影

在这里插入图片描述

<!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>
        #c{
            margin-top:200px;margin-left: 200px;
            width: 200px;height: 200px;
            border:2px solid #fff;
            border-radius:50%;
            box-shadow:0px 0px 100px 100px #fff;
        }
    </style>
</head>
<body bgcolor="#000">
    <div id="c"></div>
</body>
</html>

outline 轮廓

outline: 0; 清除文本框自带的轮廓
outline:width  style  color;
轮廓是描绘在边框之外的一圈线条,项目中经常要清除
可以在当前input样式中清除,也可以在:focus中清除

盒子模型

框模型-----元素在页面上实际占地大小的计算方式
所有元素皆为框,所有元素默认在页面都占据空间
默认框模型的计算公式
元素实际的占地宽度=左外边距+左边框+左内边距+内容区域的width+右内边距+右边框+右外边距
元素实际的占地高度=上外边距+上边框+上内边距+内容区域的height+下内边距+下边框+下外边距
外边距,边框以外的距离,元素与元素之间的距离,margin
内边距,边框到内容区域之间的距离
f12中,内容区域---蓝
       内边距----绿
       边框------黄
       外边距----橘黄

外边距的溢出问题:在特殊情况下 子元素的上外边距或作用父元素上

特殊的情况:1.父元素没有上边框
           2.父元素内容区域的上沿和子元素内容区域的上沿重合
解决方案:1.给父元素添加上边框,弊端,增加了父元素的实际占地高度
          2.给父元素添加上内边距,弊端,增加了父元素的实际占地高度
          3.overflow:hidden/auto写在父元素上,父元素被设置溢出隐藏
          4.给父元素空table元素
            浏览器页面上看不到这个空table,
            但是浏览器判定父元素内容区域的上沿和子元素内容区域的上沿分离了

改变盒子模型的计算方式

box-sizing: content-box; 默认的盒子模型计算方式
                         左右外边距+左右边框+左右内边距+设置的width
                         content--->我们设置的width是内容区域的宽度
            border-box  盒子模型计算方式:左右外边距+设置的width
           	             border---->我们设置的width包含,
                         左右边框+左右内边距+内容区域宽度
			width设置%一般都是用border-box
			这样设置的好处,不用计算,直接用%和padding完成元素排列,与元素之间的空隙

背景样式

1.背景颜色    background-color : transparent;
2.背景图片    background-image:url("图片路径")
3.背景图片平铺  background-repeat : repeat 平铺默认  no-repeat 不平铺  repeat-x X轴平铺  repeat-y y轴平铺
4.背景图片定位  background-position:x y ;  left right center top bottom 
5.背景图片尺寸  background-size:x y ;设置一个值是x和y的尺寸 两个值是x ,y的尺寸   cover填充容器    contain  完全显示
6.背景图片固定  background-attachment: scroll  默认  fixed 背景固定不会随着页面滚动条滚动
7.简写方式 background:color url repeat attachment position;  简写中缺少siz   

渐变 background-image

background-image 多种颜色变化的效果  一个渐变最少两个色标  
例:background-image:linear-gradiend(方向,色标 0%,色标 100%)
		方向的取值:to top   to bottom  to right  to lefr;   也可以取值角度  45deg;

线性渐变:background-image:linear-gradient(方向,色标,色标)
径向渐变:background-image:radial-gradient(半径 at 圆心 ,色标,色标)  #圆心x y轴 也可以写center
重复渐变:径向渐变和线性渐变重复的运行
    	  background-image:repeating-linear-gradient(方向,色标,色标......);
		  background-image: repeating-radial-gradient(半径 at 圆心,色标,色标);
不同公司的浏览器内部核心代码
-webkid-   chrome/safari
-moz-      firefox
-ms-        IE
-o-         opera
1.要在linear-gradient之前添加前缀
2.添加4个前缀,所有写4遍,代码会自动判断你用的是哪种内核,自动适配
3.一旦添加了内核前缀,方向中只能写起点(不加to) left
    不写内容,方向一定写终点(to  right)
例子:
	background-image: -webkit-linear-gradient(left,色标 ,色标)

字体属性

1.font-size:px/rem/pt  字体大小
2.font-family:字体系列
3.font-weight:normal默认值 bol加粗  bolder更粗  lighter细  
4.font-style: normal默认值  italic斜体
5.font-variant:smll-caps小型大写字母
简写方式:
font: style variant weight size family;顺序不可以变化
最简方式:size family

文本属性

1.字体颜色 color
2.文本水平对齐方式  text-align:left(默认值)/center/right/justify  两端对齐
3.文本对齐方式行高:line-height:px  如果行高大于字号大小,那么文本会默认在行高的垂直中心显示  
4.文本线条: decoration : underline下划线   overline上划线  line-through删除线  none去线条
5.首行缩进: text-indent:px 
6.文本阴影:text-shadow : h-shadow(x轴偏移量)   v-shadow(y轴偏移量)  blur(模糊距离)  color(阴影颜色)

表格属性

table:尺寸,背景,边框,文本,内外边距都生效   设置边框时,只会给最外层添加边框
td/th: 尺寸,背景,边框,文本,内边距生效,外边距无效 vertical-align:设置td/th中文本的垂直对齐方式,其它元素无效  top/middle/bottom

设置单元格之间的间距 前提 单元格必须是分离状态   border-spacing:20px 
单元格合并  border-collapse:separate 默认值分离状态   collapse 合并状态
表格标题的位置  caption-side:top/bottom
自动布局 table-layout:auto;  默认值  固定布局 table-layout:fixed;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值