css学习总结

最新推荐文章于 2024-11-24 17:46:16 发布

鹜骜

最新推荐文章于 2024-11-24 17:46:16 发布

阅读量285

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42385705/article/details/98975679

什么是css

将内容与表现分离使得网页的表现统一，容易修改，丰富的样式，使得页面布局更加灵活，减少网页的代码量，增加网页的浏览速度，节省网络带宽。运用独立于页面的CSS，有利于网页被搜索引擎收录

选择器        声明           声明
  h1    {color：blue；font-size：12px；}
           属性   值     属性     值

样式分为行内样式；内部样式；外部样式表

行内样式
单独一行

<p style="font-size:14px; color:green;">
直接在HTML标签中设置的样式</p>

内部样式
Style标签
用在html页面title下作用范围在本html页面

<style type="text/css">
h1 {
	font-size:12px;
	color:#F00;
}
</style>

优点
方便在同页面中修改样式
缺点
不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

外部样式表

链接式

<head>                   使用外部样式表   文件类型
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式链接式，导入式
导入式
不安全不推荐使用

链接式与导入式的区别

标签属于XHTML，@import是属于CSS2.1 使用链接的CSS文件先加载到网页当中，再进行编译显示使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中 @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

样式优先级
行内样式>内部样式表>外部样式表

CSS3基本选择器

标签选择器

在.css中

h1{
    color: blue;
    font-size: 40px;
}

类选择器
1.在.css中先声明

                       属性     值
类选择器`.font_cls { font-size:16px;}`
           类名称         声明

2.在html页面使用

<标签名 class= "font_cls">标签内容</标签名>

ID选择器
1.声明在.css

#font_id { font-size:16px;}

2.在html中使用

<标签名 id= "font_id">标签内容</标签名>

标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次

CSS的高级选择器

层次选择器

后代选择器 E F
子选择器 E>F
相邻兄弟选择器 E+F
通用兄弟选择器 E~F
在.css中

body >/+/~ p{  background: red;  }

结构伪类选择器
p:first-child{background:color1;}
p:nth-child(x){background:color1;}
p:last-child{background:color1;}

p:first-of-type:{background:color1;}
p:nth-of-type(x):{background:color1;}
p:last-of-type:{background:color1;}
x为第几个元素

例ul li:first-child{ background: red;} 选择ul第一个子元素变红色
ul li:last-child{ background: green;}  选择ul最后一个子元素变绿色
p:nth-child(1){ background: yellow;} 选择父级第一个子元素变黄色
p:nth-of-type(2){ background: blue;} 选择父级第二个子元素变蓝色

:nth-child(n)在父级里从一个元素开始查找，不分类型
:nth-of-type(n)在父级里先看类型，再看位置

属性选择器

 a[id] { background: yellow; } 含有id属性的a元素变黄色
 a[id=first] { background: red; } 含有id=first属性的a元素变红色，属性和属性值必须完全匹配才能被选中
 a[class*=links] { background: red; } 元素有class属性包含links字符串变红色
 a[href^=http] { background: red; }  含有href的a元素并且以http开头变红色 
a[href$=png] { background: red; }   含有href的a元素并且以png结尾变红色

在这里插入图片描述

字体样式和文本样式

font-family 设置字体类型 font-family:“隶书”;
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
在font中声明多个属性必须全部属性都有且有顺序不然会出错风格宽度字体大小字体
font:italic bold 36px “宋体”;

文本样式

color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline;

文本阴影

text-shadow:#FF0000 5px 5px 5px;
	         颜色   x   y轴偏移量  模糊半径

超链接样式

超链接伪类名称固定

a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}
a:visited 单击访问后超链接样式 a:visited {color:#333;}
a:hover 鼠标悬浮其上的超链接样式 a:hover{color:#ff7300;}
a:active 鼠标单击未释放的超链接样式 a:active {color:#999;}
顺序
a:link->a:visited->a:hover->a:active
未点击点击后鼠标悬浮单击未释放

列表样式

none 无标记符号 list-style-type:none;
disc 实心圆，默认类型 list-style-type:disc;
circle 空心圆 list-style-type:circle;
square 实心正方形 list-style-type:square;
decimal 数字 list-style-type:decimal

背景样式

背景颜色
background-color

背景图片
background-image:url(图片路径);

背景重复方式
background-repeat
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺

背景定位
background-position
Xpos Ypos 单位：px，
Xpos表示水平位置，Ypos表示垂直位置
X% Y% 使用百分比表示背景的位置
X、Y方向关键词水平方向的关键词：
left、center、right
垂直方向的关键词：
top、center、bottom

background:#C00 url(../img/dome1.gif) 205px 10px no-repeat;
           背景颜色     图片地址         背景定位   背景不重复

背景尺寸 background-size
auto 默认值，使用背景图片保持原样
percentage 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover 整个背景图片放大填充了整个元素
contain 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

渐变效果

linear-gradient ( position,  color1,  color2)
				渐变方向    第一种颜色  第二种颜色

其他

em，px和pt单位的区别
em根据分辨率适配是相对的值，px是像素的值 pt类似word中规定的字体大小

在这里插入图片描述