css入门

Wood_Ren

于 2018-12-06 15:19:53 发布

阅读量133

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Wood_Ren/article/details/84855743

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

css 入门

一.架构分析

页面 => div 的层级结构 => 具体采用哪些功能标签显示内容

结构层 > 位置层(布局层) > 内容层

二. css 引入

行间式

<div style="width: 100px; height: 100px">
    
</div>
<!-- 简单直接,针对性强 -->

内联式

<head>
    <style>
        选择器 {
            width: 100px;
            height: 100px
        }
    </style>
</head>
<!-- 解耦合了,可读性强 -->

外联式

/* index.css */
选择器 {
    width: 100px;
    height: 100px
}
/* 适合团队高效率开发,耦合性低,复用性强 */

<!--index.html -->
<link rel="stylesheet" type='text/css' href='./index.css'>

三.三种引入"优先级"方式

1.没有优先级
2.不同的属性样式协同操作,相同的样式采用覆盖机制,选择逻辑最下方的
3.行间式一定是逻辑最下方的样式

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>三种引入的优先级</title>

	<!-- 三种可以同时存在,协同完成布局 -->
	<!-- 三种之间没有优先级之说,谁在逻辑下方(后解释的)谁就起作用(样式覆盖机制) -->
	<!-- 行间式一定是逻辑最下方的 -->

	<!-- 内联 -->
	<style type="text/css">
		 div{
		 	width: 200px;
		 	color: pink;
		 }
	</style>

	<!-- 外联 -->
	<link rel="stylesheet" href="03.css">
</head>
<body>
	<!-- 优先级:大家同时存在且操作同一对象同一属性,才会出现冲突,最终起作用的就是优先级高的 -->
	
	<!-- 行间 -->
	<div style="background-color: cyan; color: orange ">
		你是个好人
	</div>
	
</body>
</html>

四.选择器

一.基础选择器

* | div | . | #

<!-- 先建立一个用来试验选择器的 html 文件 -->
<!-- 04.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>基础选择器</title>
    <link rel="stylesheet" href="./04.css">
</head>
<body>
	<div></div>
	<div class="dd"></div>
	<div class="dd" id="d"></div>

	<div class="div"></div>
	<div class="div red r"></div>
	<div class="div"></div>
</body>
</html>
<!-- ******* -->
	<!-- 选择器: css 选择 html 标签的一个工具 => 将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 -->
	<!-- 选择器就是给 html标签起名字 -->

1.通配选择器

/* * => 通配选择器 => html,body,body 下所有用于显示内容的标签 */
* {
    border: 1px solid black;
}

2.标签选择器

/* div => 标签名 => 就是标签选择器 : 开发过程中尽可能少的运用,运用范围为最内层的显示层 */
div {
    width: 200px;
    height: 200px;
    background-color: red;
}
匹配文档中所有与标签名匹配的标签: 如 div{}会匹配文档中全部 div,span{}会匹配文档中所有 span

3.类选择器

/* dd => class名 => 类选择器 : 布局的主力军 */
.dd{
    background-color: orange;
}
匹配文档中所有拥有class属性且属性值为dd的标签：如<sup class="dd"></sup> <sub class="dd"></sub>均会被匹配

4.id 选择器:

/* d => id 名 => id 选择器 : id 一定要为唯一的*/
#d{
    background-color: green;
}
匹配文档中所有拥有id属性且属性值为d的标签：如<div id="d"></div> <section id="d"></section>均会被匹配

五.文本样式

1.字体样式

font-family: 字体族科, 多值用于备用, 以,隔开

font-family: "STSong", "Arial";

font-size: 字体大小
font-style: 字体风格 normal | italic | oblique

i { 
    /* 多用于normal清除系统字体风格 */
    font-style: normal;
}

font-weight: 字体重量 normal | bold | lighter | 100~900
line-height: 行高
font: 字重风格大小/行高字族

2.文本样式

color: 文本颜色
text-align: 横向排列

left 居左 | center 居中 | right 居右

vertical-align: 纵向排列

baseline: 将支持 valign 特性的对象的内容与基线对齐
sub: 垂直对齐文本的下标
super: 垂直对齐文本的上标
top: 将支持 valign 特性的对象的文本与对象顶端对齐
text-top: 将支持 valign 特性的对象的内容与对象顶端对齐
middle: 将支持 valign 特性的对象的文本与对象中部对齐
bottom: 将支持 valign 特性的对象内容与对象底端对齐
text-bottom:将支持 valign 特性的对象的文本与对象底端对齐

text-indent: 字体缩进
text-decoration: 字划线

a {
    /*取消划线*/
    text-decoration: none;
}
/* 多用于 a 标签去除下划线 */

letter-spacing: 字间距
word-spacing: 词间距
word-break: 自动换行

normal: 默认换行规则
break-all: 允许在单词内换行

3.背景样式

background-color: 颜色
background-image: 图片

background-image: url(bg.png);

background-repeat: 重复

repeat | no-repeat | repeat-x | repeat-y

background-position: 定位

top | bottom | left | right | center

v_hint: 定位值可为方位词\百分比及固定值, 值个数默认为两位(水平/垂直), 一个值时垂直默认 center

background-attachment: 滚动模式

scroll | fixed

v_eg: 父级设置属性, 子集内容超出父级范围

v_hint: 掌握基本属性

六. display

block: 块级标签, 独占一行, 支持所有 css 样式

/* block可以嵌套所有显示类型标签, div | h1~h6 | p */
/* 注: hn 与 p 属于文本标签,所以一般只嵌套 inline 标签 */
box {
    display: block;
}

inline: 内联(行级)标签, 同行显示, 不支持宽高

/* inline标签只能嵌套 inline 标签, span | i| b | sup | sub | ins */
box {
    display: inline;
}

inline-block: 内联块标签, 同行显示

/* inline-block 可以嵌套其他类型标签,但不建议嵌套任意类型标签 img | input */
box {
    display: inline-block;
}

Wood_Ren

关注

0
点赞
踩
0

收藏

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

css 入门一.架构分析页面 =&gt; div 的层级结构 =&gt; 具体采用哪些功能标签显示内容结构层 &gt; 位置层(布局层) &gt; 内容层二. css 引入行间式&lt;div style="width: 100px; height: 100px"&gt; &lt;/div&gt;&lt;!-- 简单直接,针对性强 --&gt;内联式&lt..
复制链接

扫一扫

专栏目录