1. 技术文章
  2. 前端学习(3)-CSS

前端学习(3)-CSS

由 梦想的初衷 提交于 2020-04-06 11:37:40

一 CSS

CSS是Cascading Style Sheets的缩写，层叠样式表，用来控制网页数据的显示，可以使网页的显示与数据内容分离。

二 引入方式

　　（1）行内式：在标记的style属性中设置CSS样式，不推荐使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello CSS</title>
</head>
<body>
    <div style="color: aqua;background-color: bisque">hello world</div>
</body>
</html>

 　　（2）嵌入式：将CSS样式集中写在网页的<head></head>标签找那个的<style></style>标签中。结果和上图一致；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello CSS</title>
    <style>
        div{
            color: aqua;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div >hello world</div>
</body>
</html>

　　（3）链接式：写一个*.css文件引入到HTML文件中。不知道为什么用Chrome浏览器和IE都不能显示，但在Windows Edge浏览器中可以。推荐使用这种方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello CSS</title>
    <link  href="myCss.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div >hello world</div>
</body>
</html>
CSS文件：
div{
    color: aqua;
    background-color: bisque;
}

　　（4）导入式：在<head></head>标签中的<style></style>标签中导入*.css文件。还是只能在Windows Edge中正常显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello CSS</title>
    <style type="text/css">
        @import "myCss.css";
    </style>
</head>
<body>
    <div >hello world</div>
</body>
</html>

　　如果以上几种方式同时使用，采取就近原则，离标签最近的样式将被适用。

三 CSS选择器

选择器是用来指定样式的作用对象，作用于哪些标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello CSS</title>
    <style type="text/css">
        *{   {#通用选择器#}
            background-color: aqua;
        }
        div{ {#标签选择器， 标签名字#}
            font-size: 50px;
        }
        #name{ {#以标签中的id作为选择器， 前面加"#" #}
            color: black;
        }
        .p2{ {#以标签中的id作为选择器，前面加"." #}
            font-style: oblique;
        }
        .div1 p1{ {#后代选择器， div1是父代标签class，p1是子代标签class 只要是有这种层级关系的都会被指定， 用空格隔开#}
            font-size: 60px;
        }
        .div1>.p1{ {#子代选择器，div1是父代标签class，p1是子代标签class 只会把子代指定样式， 用大于号隔开#}
            color: darkcyan;
        }
        #name, #sex{ {#同时指定多个没有标签样式，并列选择器，用逗号隔开#}
            color: coral;
        }
        .div1+#name{ {#毗邻选择器， 会指定class是div1的紧挨着的下一个id是name的标签的样式#}
            color: blue;
        }
        [class]{  {# 属性选择器 所有这类属性的标签都有这个样式 #}
            color: red;
        }
        [class="p2"]{ {# 属性选择器 指定属性值为p2 的标签的样式 #}
            color: black;
        }
        [name]{     {# 为自己创建的属性添加样式 #}
            font-size: 50px;
        }
        div [class="p2"]{ {# 当用属性键值对区分不出时，可以在前面加上标签名，用来指定样式 #}
            color:black;
        }
        p [class="p2"]{ {# 指定p标签中属性class值等于p2的标签的样式 #}
            color: blue;
        }
        [class~="div2"]{ {# 指定标签属性中只要有一个属性是div2的标签的样式，可以选中一个属性多个值 #}
            background-color: yellow;
        }
        [class ^= "div2"]{ {# 指定class属性的值得开头为div2的标签的样式 #}
            background-color: yellow;
        }
        [class $= "div2"]{ {# 指定class属性的值以div2结尾的标签的样式 #}
            background-color: yellow;
        }
        [class *= "div2"]{ {# 指定class属性的值包含div2的标签的样式 #}
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div >hello world</div>
    <div class="div1">
        <p class="p1">div p</p>
    </div>
    <p id="name">I'm damon</p>
    <p id="sex">Man</p>
    <p class="p2">p2标签</p>
    <div class = "p2">classp2 div</div>
    <p name="damon">damon</p> {# 自己创建个name属性 但浏览器不认识#}
    <div class="div2 div3">两个属性</div> {# 这个标签的class属性有两个值div2 div3 #}
</body>
</html>

四 伪类

伪类是对选择器添加特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello CSS</title>
    <style type="text/css">
        a:link{ {# 定义链接时的样式 #}
            color: yellow;
        }
        a:hover{ {# 定义鼠标悬浮到链接时的样式 #}
            color: blue;
        }
        a:visited{  {# 定义链接被访问后的样式 #}
            color: black;
        }
        a:active{ {# 定义链接访问时的样式 #}
            color: red;
        }
    </style>
</head>
<body>
    <a href="www.baidu.com">anchor伪类</a>
</body>
</html>
anchor伪类 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello CSS</title>
    <style type="text/css">
        #p1:before{
            content: "伪类"; {# 在id是p1的标签的内容前面加‘伪类’ #}
            color: red;
        }
        #p2:after{
            content: "伪类"; {# 在id是p2的标签的内容后面加‘伪类’ #}
            color: darkcyan;
        }
    </style>
</head>
<body>
    <p id="p1"> before </p>
    <p id="p2"> after </p>
</body>
</html>
before,after伪类

五 常用属性

　　1.颜色属性：下面是颜色属性常用的四种表示方式

<div style="color: red">英文单词</div>
<div style="color: #ff2233">十六进制</div>
<div style="color: rgb(255,0,0)">rgb</div>
<div style="color: rgba(255,0,0,0.5)">rgba</div>

　　2.字体属性

<div style="font-size: smaller">字体大小</div>
<div style="font-family: 'Times New Roman'">字体样式</div>
<div style="font-weight: lighter">字体粗细</div>
<div style="font-style: italic">字体倾斜</div>

　　3.背景属性

background-color: red; {# 设置背景颜色 #}
background-image: url("1.jpg"); {# 设置背景图片 #}
background-repeat: no-repeat; {# 背景图片是否平铺整个背景 #}
background-size: 100px 200px; {# 背景图片大小 #}
background-position； center center; {#背景图片位置在上下的中心 左右的中心 #}

也可以直接这么写：



background: red no-repeat url("1.jpg") 100px 200px;

　　4.文本属性

text-align: center; {# 文本居中 #}
line-height: 100px; {# 文本所占行的高度 #}
text-indent: 10px; {# 文本首行缩进 #}
letter-spacing: 10px; {# 文本中每个字母的间隙 #}
word-spacing: 10px; {# 文本中每个单词的间隙 #}
text-transform: capitalize; {# 文本中单词首字母大写 #}

　　5.外边距和内边距

　　在html中一切皆盒子。margin是盒子与盒子之间的距离，border是盒子的边界，padding是盒子边界距离内容的距离

　　

 

　　注意：当指定一个CSS元素的长度和宽度时，指定的是内容区域的长宽，要指定完全体的长宽，还需指定边宽和边距。

　　6.边界属性　

border-stype: solid

border-color: red

border-width: 20px

简写：border: 10px red solid　　

六 嵌套规则

　　1. 块级元素可以嵌套内联元素或者某些块级元素，内联元素不能包含块级元素而只能包含其他内联元素；

　　2. h1, h2, h3, h4, h5, h6 p, dt这些块级元素只能包含内联元素；

　　3. li内可以包含div；

　　4. 块级元素应该与块级元素并列， 内联元素与内联元素并列；

参考文献：

https://www.cnblogs.com/yuanchenqi/articles/5977825.html

标签
RED
black
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!