CSS
2021-06-07 01:04
阅读：845
标签：16px 网页 ica 独立 比例 z-index 优先级 吸引 无限
CSS
什么是CSS
-
Cascading Style Sheet 层叠级联样式表
-
CSS：表现(美化网页)
-
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
发展史
-
CSS1.0
-
CSS2.0：DIV(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
-
CSS2.1：浮动，定位
-
CSS3.0：圆角，阴影，动画……浏览器兼容性
基本入门
-
style
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
style>
h1{
color: red;
}
style>
head>
body>
h1>我是标题h1>
body>
html>-
分离，link获取(建议使用这种)
h1{
color: red;
}
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
link rel="stylesheet" href="css.css">
head>
body>
h1>我是标题h1>
body>
html>-
CSS的优势
-
内容和表现分离
-
网页结构表现统一，可以实现复用
-
样式十分的丰富
-
建议使用独立于html和css文件
-
利于SEO，容易被搜索引擎收录！
-
CSS的三种导入方式
-
内部样式
-
外部样式
-
行内样式
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
style>
h1{
color: red;
}
style>
link rel="stylesheet" href="css.css">
head>
body>
h1 style="color: #1F87CC">我是标题h1>
body>
html>/*
外部样式
*/
h1{
color: yellow;
}
-
拓展：外部样式两种写法
-
链接式
HTML
link rel="stylesheet" href="css.css">-
导入式
@import是CSS2.1特有！
style>
@import "css.css";
style> -
选择器
-
作用：选择页面上的某一个或者某一类元素
基本选择器
-
标签选择器：选择一类标签 标签{}
/*标签选择器，会选择到页面上所有的这个标签的元素*/
h1{
color: #a13d30;
}
-
类选择器class：选择所有class属性一致的标签，跨标签 .类名{}
/*类选择器的格式，.class的名称{}
好处，可以多个标签归类，是同一个class
*/
.a1{
color: #3cbda6;
}
.b2{
color: #0D7114;
}
-
id选择器：全局唯一！ #id名{}
/* id选择器：id必须保证全局唯一！
#id名称{}
*/
#1{
color: pink;
}
/*选择器优先级
不遵循就近原则，固定的
id选择器>类选择器>标签选择器
*/
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
head>
body>
h1 id="1">标题1h1>
h1 class="a1">标题2h1>
h1 class="b2">标题3h1>
p class="b2">标签p>
body>
html>-
优先级：id>class>标签
层次选择器
-
后代选择器：在某个元素的后面(祖爷爷-爷爷-父亲-儿子)，以空格表示
/*后代选择器*/
body p{
background: pink;
}
-
子选择器：一代(儿子)，以>表示
/*子选择器*/
body>p{
background: blue;
}
-
相邻兄弟选择器：只有一个，相邻向下(同辈)，以+表示
/*相邻兄弟选择器*/
.active+p{
background: yellow;
}
-
通用兄弟选择器：当前选中元素的向下所有兄弟(同辈)，以~表示
/*通用兄弟选择器*/
.active~p{
background:red;
}
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
head>
body>
p class="active">p1p>
p>p2p>
p>p3p>
ul>
li>
p>p4p>
li>
li>
p>p5p>
li>
li>
p>p6p>
li>
p class="active">p7p>
p>p8p>
ul>
body>
html>结构伪类选择器
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
style type="text/css">
/*ul的第一个子元素*/
ul li:first-child{
background: rebeccapurple;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: green;
}
/* 选择当前p元素的父元素,选择父级元素的第一个，并且是当前元素才生效*/
p:nth-child(1){
background: saddlebrown;
}
/* 选择当前p元素的父元素,选择父级元素的第二个当前元素*/
p:nth-of-type(2){
background: aqua;
}
style>
head>
body>
p>p1p>
p>p2p>
p>p3p>
ul>
li>li1li>
li>li2li>
li>li3li>
ul>
body>
html>属性选择器
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
style >
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #1F87CC;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font:bold 20px/50px Arial;
}
/*属性名，属性名=属性值(正则)
= 绝对等于
*=包含这个元素
^=以这个开头
$=以这个结尾*/
/*存在id属性的元素a[]{}*/
a[id]{
background: yellow;
}
/*id=first的元素*/
a[id=first]{
background: green;
}
/*class中有links的元素*/
a[class*=‘links‘]{
background: red;
}
/*选中href中以http开头的元素*/
a[href^=http]{
background: blue;
}
a[href$=doc]{
background: red;
}
style>
head>
body>
p class="demo">
a href="http://www.baidu.com" class="links item first" id="first">1a>
a href="http://www.360.com" class="links item active" target="_blank" title="test">2a>
a href="images/123.html" class="links item " >3a>
a href="images/123.png" class="links item " >4a>
a href="images/123.jpg" class="links item " >5a>
a href="abc" class="links item " >6a>
a href="/a.pdf" class="links item " >7a>
a href="/abc.pdf" class="links item " >8a>
a href="abc.doc" class="links item " >9a>
下一篇：Django眼中的MVC
评论
亲，登录后才可以留言！