CSS 入门

最新推荐文章于 2024-08-19 17:35:32 发布

EdVzAs

最新推荐文章于 2024-08-19 17:35:32 发布

阅读量211

点赞数

文章标签： css html web css3

本文链接：https://blog.csdn.net/weixin_46131409/article/details/104734295

版权

HTML/CSS/JS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

参考:cnblogs.com/yuanchenqi/articles/5977825.html
ruanyifeng.com/blog/2015/07/flex-grammar.html
jianshu.com/p/a3da5e27d22b

一.CSS概述
1.CSS概念:Cascading Style Sheets(层叠样式表)的简称
2.用途:控制网页数据的表现,可使网页的表现与数据内容分离
3.怎样找到标签;如何操作标签对象(element)

二.4种引入方式
1.行内式:在style属性中设定CSS样式

这种方式没有体现出CSS的优势,不推荐使用
将覆盖任何全局的样式设定,如在< style>标签/外部样式表中规定的样式

<div style="background-color:rebeccapurple;color:red">hello yuan</div>

2.嵌入式:将CSS样式集中写在< head>内的< style>中

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{  #通过名字找到标签,操纵<p></p>
            background-color:rebeccapurple;#调整字的颜色
            font-size:40px#调整字体大小
        }
        a{
            text-decoration:none;#去除下划线
        }
    </style>
</head>

3.链接式:通过< link>将一个.css(Stylesheet)文件引入到HTML文件中,写在< head>中

通过HTML层面规则(< link>的属性)引入
可引入任意多个文件

<link href="mystyle.css" rel="stylesheet" type="text/css">
#href规定文件路径
#rel规定文件类型(.css)
#type规定被链接文档的MIME类型,可不写

4.导入式:通过@import将一个独立的.css文件引入到HTML文件中,写在< head>内的< style>中

通过CSS层面规则(@import " ")引入
引入文件数有限制

<style type="text/css">
          @import"mystyle.css"; #此处要注意.css文件的路径
</style>
#type可不写

5.导入式会在整个网页装载完后再装载CSS文件,如果网页较大则会儿出现先显示无样式的页面,闪烁一下后再出现网页的样式;链接式会在网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的

三.CSS的选择器(Selector):Selector指明了{ }中的"样式"的作用对象,也就是"样式"作用于网页中的哪些标签
对某元素的格式设置同样会应用到该元素的所有子元素上

1.基础选择器

# ＊:通用元素选择器,匹配任何元素                    
* { margin:0; padding:0; }

# E:标签选择器,匹配所有使用E标签的元素               
p { color:green; }#匹配所有<p>

# .info和E.info:class选择器,匹配所有class属性中包含info的元素
.info { background:#ff0; }    p.info { background:blue; }

# #if和E#id:id选择器,匹配该id的元素
#id { background:#ff0; }   p#id { background:#ff0; }#这个好无聊啊,没什么用

#class和./id和#必须连在一起写,否则无效

2.组合选择器

#E,F:多元素选择器,同时匹配所有E和F元素,E和F之间用','分隔
div,p { color:#f00; }

#E F:后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
#不只匹配子元素,所有后代中存在即可
li a { font-weight:bold;}

#E > F:子元素选择器,匹配所有E元素的子元素F
#只匹配子元素,子元素中不存在就找不到
div > p { color:#f00; } 

#E + F:毗邻元素选择器,匹配E元素后紧邻(中间没有其他元素)的同级元素F
div + p { color:#f00; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .div1>p{
            background-color: aqua;
            color: deeppink;
        }

        .main2>div{
            background-color: blueviolet;
            color: chartreuse;
        }
    </style>
</head>
<body>

      <div class="div1">hello1
          <div class="div2">hello2
              <div>hello4</div>
              <p>hello5</p>
          </div>
          <p>hello3</p>
      </div>
      <p>hello6</p>

<hr>

     <div class="main2">1
       <div>2
           <div>
               4
           </div>
       </div>
       <div>
               3
           </div>
     </div>
</body>
</html>

3.嵌套规则：
(1)块级元素可以包含内联元素/某些块级元素;但内联元素不能包含块级元素,只能包含内联元素

(2)有几个特殊的块级元素只能包含内联元素,不能包含块级元素,如hn,p,dt(不会报错,自动取出)

(3)li内可以包含div

(4)块级元素与块级元素并列,内联元素与内联元素并列
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [suoning]{
            color: blueviolet;
        }
        .he>div{
            color: bisque;
        }

    </style>
</head>
<body>

<div class="he">111
    <p class="fr">222
        <div>333</div>
    </p>
    <div>444</div>
</div>

***************************

<div suoning="sb">ddd
         <p>pppp</p>
     </div>
     <p suoning="sb2">ddd2
         <p>pppp2</p>
     </p>
</body>
</html>

4.属性选择器

#[att]:匹配所有具有att属性的E元素,不考虑它的值
[title] { color:#f00; }

#ele[att]:匹配ele标签中所有具有att属性的E元素,不考虑它的值
p[title] { color:#f00; }

#E[att=val]:匹配所有att属性等于"val"的E元素
div[class=”error”] { color:#f00; }

#E[att~=val]:匹配所有att属性有多个空格分隔的值,其中一个值等于"val"的E元素      
td[class~=”name”] { color:#f00; }

#E[attr^=val]:匹配属性值以指定值开头的每个元素
div[class^="test"]{background:#ffff00;}

#E[attr$=val]:匹配属性值以指定值结尾的每个元素 
div[class$="test"]{background:#ffff00;}

#E[attr*=val]:匹配属性值中包含指定值的每个元素
div[class*="test"]{background:#ffff00;}

5.伪类(Pseudo-classes):用来给选择器添加一些特殊效果
(1)anchor伪类:专用于控制链接的显示效果

#a:link{}:没有接触过的链接,定义了链接的常规状态
#a:hover{}:鼠标放在链接上的状态,产生视觉效果
#a:visited{}:访问过的链接;用于判断已访问过的链接
#a:active{}:在链接上按下鼠标时的状态,表现鼠标按下时的链接状态

#伪类选择器:伪类指的是标签的不同状态:
           a==>点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}

<a>即为超链接标签

<html>
<head>
<style type="text/css">
    a:link{color: red;}
    a:visited {color: blue;}
    a:hover {color: green;}
    a:active {color: yellow;}
    .box:hover .top{color: red}#只让top适用
</style>
</head>
<body>
    <a href="01-hello-world.html">hello-world</a>
    <div class='box'>
        <div class='top'><div>
        <div class='bottom'><div>
    <div>
</body>
</html>

(2)anchor伪类用于< a>之外的其他标签:

标签:伪类名称{css代码;}
标签1:伪类名称 标签2{css代码}==>对1执行操作,2产生变化
/*控制盒子的一部分(2必须是1的子标签)*/
标签1:伪类名称+标签2{css代码}==>对1执行操作,2产生变化/*别用*/
/*控制邻居(2是紧邻在1之后的同级标签)*/

可以通过class值/标签名称/id值选择标签

<html>
<head>
<style type="text/css">
    .top:hover{color: red}/*放于top,top变化*/
    .box:hover .top{color:red}/*放于box,top变*/
</style>
</head>
<body>
    <a href="01-hello-world.html">hello-world</a>
    <div class='box'>
        <div class='top'><div>
        <div class='bottom'><div>
    <div>
</body>
</html>

(3)before after伪类:在指定标签(同一行的)前/后添加内容

#标签:before    
p:before {content='插入的内容'}/*在每个<p>元素之前插入内容*/
p:before{content:"hello";color:red}
#标签:after     
p:after {content='插入的内容'}/*在每个<p>元素之后插入内容*/
p:after{ content:"hello"；color:red}

6.css优先级和继承

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='UTF-8'>
	<title>Title<title>
	<style>
		.div3 {color:red;}/*优先级10*/
		.div1 .div3 {color:chartreuse;}/*优先级20*/
		#div1 .div3 {color:rebeccapurple;}/*优先级110*/
		.div3 {color:green!important;}/*直接使用本声明*/
	</style>
</head>
<body>
	<div class='div1'>
		<div class='div2'>
			<div class='div3'>嵌套优先级</div>
		</div>
	</div>
	<div class='div1' id='id1' style='color:green'>优先级</div>
</body>
</html>

(1)优先级:CSS样式在浏览器中被解析的先后顺序

#样式表中的特殊性描述了不同规则的相对权重,基本规则是：
   1.内联样式表的权值最高          style=""==>1000
  2.统计选择符中的ID属性个数       #id==>100
 3.统计选择符中的CLASS属性个数     .class==>10
4.统计选择符中的HTML标签名个数      div==>1
#文内的样式优先级高于外部定义:
#这里文内样式指形如<div style="color:red">blah</div>的样式
#外部定义指经由<link>/<style>卷标定义的规则;

#按这些规则将数字符串逐位相加,就得到最终的权重
#然后在比较取舍时按照从左到右的顺序逐位比较

标签 {css代码!important}
#优先级最高,直接使用该规则
#important声明冲突时比较优先级

#如果优先权一样,则按在源码中出现的顺序决定,后来者居上
#由继承得到的样式没有优先级计算,低于一切其它规则,任何显式申明的规则都可覆盖继承样式

(2)继承性:一种机制,允许样式不仅可以应用于某个特定元素,还可应用于其后代

是CSS的一个主要特征,依赖于祖先-后代的关系
CSS继承性的权重非常低,任何显式申明的规则都可覆盖其继承样式

div{border:1px solid #222}

<div>hello 
	<p>yuan</p>
</div>

CSS继承也是有限制的,有一些属性不能被继承,如:border/ margin/padding/background

四.CSS的常用属性
1.颜色属性:

<div style='color:颜色名'>
<div style="color:blueviolet">ppppp</div>
##########################################################
<div style='color:颜色的16进制编号'>
<div style="color:#ffee33">ppppp</div>
##########################################################
<div style='color:rgb(红,绿,蓝)'>
#通过RGB调色,3个参数范围均为[0,255]
<div style="color:rgb(255,0,0)">ppppp</div>
<div style='color:rgba(红,绿,蓝,透明度)'>
#透明度范围为[0,1];0为完全透明,1为完全不透明
<div style="color:rgba(255,0,0,0.5)">ppppp</div>

RGB颜色(编号)查询对照表:114la.com/other/rgb.htm
在这里插入图片描述
2.字体属性:

文字大小:font-size:像素/百分比/提供的值
font-size:20px/50%/larger
文字字体:font-family:数值/提供的值
font-family:'Lucida Bright'
文字粗细:font-weight:数值/提供的值
font-weight:900/lighter
文字风格:font-style:normal/italic/oblique/inherit
#依次为:标准(默认值)/斜体/倾斜/从父元素继承
font-style:oblique

italic和oblique区别:
blog.csdn.net/weixin_41355260/article/details/90369221

3.背景属性:

背景颜色:background-color:颜色
background-color:cornflowerblue;
背景图片:background-image:url('path')
background-image:url('1.jpg');
背景图片是否平铺:background-repeat:提供的值
#依次为:repeat平铺满(默认值)/no-repeat不平铺/repeat-x横向铺满/repeat-y纵向铺满
background-repeat:no-repeat;
背景图片位置:background-position:横向位置 纵向位置
#使用该属性时background-repeat:no-repeat
#两位置均可为负数
#横向:px数(距左边框)/left center right
#纵向:px数(距上边框)/top center bottom
background-position:center center;
	简写:background-position:center
background-position:right top（20px 20px）;
	简写:background-position:20px 20px
	
简写:background:no-repeat 0 -100px url('1.jpg');

在这里插入图片描述

<body style="background:20px 20px no-repeat #ff4 url('1.jpg')">
#如果将背景属性加在body上,要给body加height=,否则结果异常(body为空,无法撑起背景图片)
#另外,如果此时设置width＝100px,也看不出效果,除非设置出html
<div style="width:300px;height:300px;background:20px 20px no-repeat #ff4 url('1.jpg')">

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Title</title>
	    <style>
	        html{background-color: antiquewhite;}
	        body{
	            width: 100px;
	            height: 600px;
	            background-color: deeppink;
	            background-image: url(1.jpg);
	            background-repeat: no-repeat;
	            background-position: center center;
	        }
	    </style>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Title</title>
	    <style>
	        span{
	            display:inline-block;/*内联标签=>块级标签*/
			/*不独占一行,但可设定width/height;具体见下*/
	            width:18px;
	            height:20px;
	            background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
	            background-position: 0 -100px;
	        }
	    </style>
	</head>
	<body>
	    <span></span>
	    <span></span>
	    <span></span>
	    <span></span>
	    <span></span>
	</body>
</html>

在这里插入图片描述

4.文本属性:文本过多会导致从本行溢出,写在下一行

文字大小:font-size:像素值
font-size:200px;
横向位置:text-align:提供的值
text-align:center;
文本行高:line-height:像素值/基于字体大小的百分比
#即文字高度加上文字上下的空白区域的高度
line-height: 200px/50%;
？元素内容的垂直对齐方式:vertical-align:－4px
#只对行内元素有效;对块级元素无效
首行缩进:text-indent:像素值
text-indent:150px;
字符间距:letter-spacing:像素值
letter-spacing:10px;
单词间距:word-spacing:像素值
#仅对英文等语言有效;单词按空格分割
word-spacing:20px;
文本转换:text-transform:提供的值
text-transform:capitalize;/*每个单词首字母大写*/

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Title</title>
	    <style>
	        .outer .item {
	            width:300px;
	            height:200px;
	            background-color:chartreuse;
	            display:inline-block;
	        }
	    </style>
	</head>
	<body>
	    <div class="outer">
	        <div class="item" style="vertical-align: top">ll
	        </div>
	        <div class="item">
	        </div>
	    </div>
	    <script>
	    </script>
	</body>
</html>

5.边框属性:每个标签可视为一个盒子,有边界但默认不可见,边框即为该边界
border-radius:cnblogs.com/goloving/p/7648535.html

边框线条样式:border-style:提供的值
border-style:solid/dashed;/*实线/虚线*/

边框线条颜色:border-color:提供的值
border-color:chartreuse;

边框线条粗细:border-width:像素值
border-width:20px;

边框圆滑度:border-radius:百分比/像素值
/*越大越接近圆形;默认为0*/
/*百分比指占总边长的比例,>=50%时均为圆*/
/*实质是控制角所在圆的半径(每个角是1个1/4(椭)圆弧)*/
/*4值:左上,右上,右下,左下;3值:左上,右上+左下,右下;2值:左上+右下,右上+左下;1值:全部*/
/*值可写为:value11 value12.../value21...形式,分别控制各角的水平/垂直半径*/
border-radius:5%
border-radius:5px 10px 5px 15px
border-radius:10px 20px 30px 40px/20px 50px 30px 10px

/*简写:*/
border:30px rebeccapurple solid;/*必须写全*/
/*单独控制某边边框:*/
border-top/bottom/left/right:30px purple solid;
/*单独控制某边边框某属性:*/
border-top/bottom/left/right-属性:value/*优先级高于border(-属性)*/
/*单独控制某角圆滑度:*/
border-top-left/top-right/bottom-right/bottom-left-radius:value

在这里插入图片描述
6.列表属性:

列表标签:list-style:提供的值
#即ul的·/ol的序号
list-style:decimal;#数字
list-style:none;#无
list-style:circle;#seoul圆圈
list-style:lower-latin;#小写英文字母
list-style:square;#方形点

7.dispaly属性:

隐藏该元素:display:none
#不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到
变为块级标签:display:block
变为内联标签:display:inline
变为块级-内联标签:display:inline-block
#可设置width/height,又不独占一行

inline-block 的间隙:两个inline-block间默认有间距(每个浏览器大小不同)
在这里插入图片描述
解决:

1.margin:-3px
  布局中有很多元素,每个都添加margin维护成本过大
  线上代码如果压缩,会造成布局混乱

2.给几个标签加一个父级div
div{word-spacing: -5px;}

8.元素属性:
在这里插入图片描述

(1)margin属性:外边距(控制元素与元素间距离,即元素周围空间的间隔,视觉上达到相互隔开的目的)

margin:值
#负值合法;默认为0
auto:浏览器计算外边距
margin:0 auto:居于父标签的正中
length:以具体单位计的外边距值
#单位可为像素/厘米等;默认为0px
x%:基于父元素宽度的百分比的外边距
inherit:从父元素继承外边距

margin:上 右 下 左
margin:上 左&右 下
margin:上&下 左&右
margin:四边
margin-top/bottom/left/right:控制单边margin

边框默认定位于浏览器窗口的左上角,但并非紧贴着浏览器的窗口的边框,这是因为浏览器默认会给< body>加上一个margin(取决于浏览器) :

#解决:
body{margin: 0;}

margin collapse(边界塌陷/边界重叠):

只在普通流文档的上下外边距产生,左右外边距不产生
意义:设想上下排列一系列规则的块级元素(如< p>)时,块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离

1兄弟div:上面div的margin-bottom和下面div的margin-top会塌陷
         取上下两者margin里的最大值作为显示值
         
2父子div:如果父div中border/padding/content均没有
         子div的margin会一直向上找,直到找到某个标签A包括中的一个
         然后按A定位
         如果一直没找到,按body定位
         
掠过父div后,子div与叔div按兄弟div发生margin collapse

#解决:
1:border:1px solid transparent
2:padding:1px
3:over-flow:hidden;

(2)padding属性:内边距(又叫填充,控制内容与边框间距离)

padding:值
#负值不合法;默认为0
length:以具体单位计的填充值
#单位可为像素/厘米等;默认值为0px
x%:基于父元素的宽度的百分比
inherit:从父元素继承padding

padding:上 右 下 左
padding:上 左&右 下
padding:上&下 左&右
padding:四边
padding-top/bottom/left/right:控制单边内边距

(3)border属性:围绕在内边距和内容外的边框(见边框属性)
(4)content:盒子里的内容,显示文本和图像

(5)元素的width和height:

当指定元素的width和height时,只是设置内容区域的宽度和高度;要知道完全大小的元素,还必须添加填充padding/边框border/边距margin
元素总宽度=width+padding-left/right+margin-left/right +margin-left/right
元素总高度=height+padding-top/bottom+margin-top/ bottom+margin-top/bottom

五.快写

div   tab
a     tab
div.main>ul>li.c*4    tab

EdVzAs

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 入门

一.css概述1.css概念:Cascading Style Sheets(层叠样式表)的简称2.用途:控制网页数据的表现,可使网页的表现与数据内容分离3.怎样找到标签;如何操作标签对象(element)二.四种引入方式1.行内式:2.嵌入式:...
复制链接

扫一扫