CSS的一些基本知识

最新推荐文章于 2019-08-25 20:39:49 发布

仙女不恰饭

最新推荐文章于 2019-08-25 20:39:49 发布

阅读量144

点赞数

分类专栏：学习案例 HTML CSS web前端

本文链接：https://blog.csdn.net/qq_43398720/article/details/98885820

版权

学习案例同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

web前端

18 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

css的一些基础知识

无CSS
在这里插入图片描述
有CSS

1.行内引入

<div style="属性名：属性值；属性名：属性值"></div>
eg:
<div style="color: red; width:20px; height:20px"></div>

缺点：1，结构不清晰后期代码维护困难

2，繁杂体积大

3，web标准结构html样式css行为js相分离行内样式就是没有形成样式和结构相分离
用处：行内样式去覆盖文本内容或者文本外样式（建议一个或两个单独样式可以下行内）

2.文本内部引入

<head>
    <style>
        div {
            width:20px;
            height:20px;
            background:red;
        }
    </style>
</head>
<body>
    <div>
        这是一个大盒子
    </div>
</body>

缺点：不彻底
用处：属于自己结构里的样式，作用反问只在当前结构文件内

3.文本外部引入（彻底分离，后期代码好维护）

1.新建一个对应的样式文件   .css
2.通过link标签在head头部引入这样的样式文件
<link rel="stylesheet" href="03-外部样式.css">
rel:说明当前链接资源的类型  stylesheet 样式表
href：路径 地址 有相对和绝对两种

三种引入方式的优先级别

优先级：行内样式大于文本内部样式大于外部链接样式

选择器

基础选择器：四个

1.
* {
    样式的集合；   属性名：属性值；
}
*  全局选择器 选择中所有标签  包含body在内
2.
标签选择器
标签名 {
    属性名：属性值；
     ......
}
eg:（将结构里的所有span标签都挑选回来）
span {
    color:red;//选择中所有的span标签，给他加上红色
}
3.
类选择器  给标签起一个类名 class=“a” 
eg:
.a {
     color:red;
}
4.id选择器  唯一的  给标签起一个id名  用 #id名 来调用
eg:
id="aa"
#aa {
     color:red;
}

基础选择器的权重关系（优先级）

**css三大特性：**层叠性优先级继承性

继承性：text-,line-,color,font- 大部分具有继承性（父元素遗传给子元素）

id > class >标签选择器

id选择器	class选择器	标签选择器
100	10	1

进阶

基础选择器组合起来就是进阶里面的几种选择器

1.群组选择器选择器1，选择器2，选择器3 { color:blue; }

<style>
    .a,.b,.c {
        height:20px;
        width:20px;
    }
</style>
...
<div class=a></div>
<div class=b></div>
<div class=c></div>

2.交集选择器选择器1选择器2 { color:red;}[注意：选择器1与选择器2之间是没有空格的]

<style>
    div.q {
        height:100px;
    }
    p.q {
        color=red;
    }
</style>
...
<div class=q></div>
<p class=q></p>

3.后代选择器父子关系（不仅仅选择儿子儿子或者孙子只要满足条件即可）父元素选择器【有空格】子元素选择器 { color: red;}

<style>
    div .box1 {
        color="red";
        /*这里是吧span中的颜色改变了*/
    }
</style>
...
<div>
    <span class="q1">span1</span>
    <span class="q2">span2</span>
</div>
<div class="box1"></div>

4.子代选择器选择器1>选择器2 {color :red;}

<style>
    .box > a {
        color="red";
    }
</style>
...
<div class="box">
    <a>这是一个链接</a>
</div>

5.伪类链接选择器（a链接）选择器：伪类 { 样式 }

a:link   没有被访问
a:visited   访问过后
a:hover   鼠标悬停
a:active   鼠标激活即被点击
注意：一般只用hover
eg:
div.box：hover {
    color blue;
}

颜色表示

1:red ,blue…

2:rgb表示法 red green blue 均是0—255

3：6位十六进制表示法 #FFFFFF

字体属性

字体大小 font-size:16px; 默认16px
字体形态 font-style:italic斜体/normal正常默认normal
字体粗细 font-weight:100-900 400正常越小越细越大越粗
字体家族 font-family:“楷体”，‘宋体’，‘微软雅黑’ 英文之间有空格就加上单引号或者双引号，如果没有空格就可以直接写
行高 line-heigth 盒子高度 垂直对齐常用 text-align 水平对齐常用

font:font-style  font-weight  font-size/line-height  font-family
font:normal 400 30px/1.5 "微软雅黑"; 
注意：一定按照顺序写！！！！！！！！

在这里插入图片描述

文本水平居中和垂直居中

**text-align:center; ** 水平
**line-height:盒子高度; ** 垂直

大小表示法

px 100px
em 相对于父元素的字体大小
rem 相对于html标签的字体大小

仙女不恰饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的一些基本知识

css的一些基础知识无CSS有CSS1.行内引入<div style="属性名：属性值；属性名：属性值"></div>eg:<div style="color: red; width:20px; height:20px"></div>缺点：1，结构不清晰后期代码维护困难 2，繁杂体积大 ...
复制链接

扫一扫