css基础知识

最新推荐文章于 2024-03-30 23:09:25 发布

为谁攀登

最新推荐文章于 2024-03-30 23:09:25 发布

阅读量270

点赞数 1

分类专栏： # 前端基础文章标签： css

本文链接：https://blog.csdn.net/shaixinxin/article/details/108989773

版权

前端基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、简介

1.1、概念

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表，实现html中内容与表现的分离，提高代码的可重用性和可维护性；
HTML（结构层）、CSS（表示层）、JavaScript（行为层）；

1.2、使用方式

1.2.1、内联方式

在标签的style属性中添加css代码

<p style=“color:green;”>hello world</p>

1.2.2、内部样式表

在头部的style标签中添加css代码

	<head>
		<style>
		   p{color:green;}
		</style>
	</head>

1.2.3、外部样式表

通过link标签进行外部样式调用

<link rel="stylesheet" href=""/>

1.2.4、导入式

使用@import导入样式

	<head>
		<style>
		   @import url(my.css);
		</style>
	</head>

1.2.5、优先级

行内样式 > 内部样式 > 外部样式 > 导入样式

1.2.6、link和@import的区别

不推荐使用@import
1、@import是CSS提供加载样式的一种方式，只能用于加载CSS。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义rel连接属性等；
2、加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候会比较明显；
3、兼容性的差别。@import在IE5以上才能识别，而link标签无此问题；
4、使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为dom操作元素的样式时，用@import方式的样式也许还未加载完成；
5、使用@import方式会增加HTTP请求，会影响加载速度；

1.3、特征

继承性：指被包含在内部的标签可以拥有外部标签的样式，比如：text-、font-、line-*，但有些属性不能继承，比如：border、padding、margin
层叠性：可以定义多个样式
优先级：样式定义冲突时，按照不同样式规则的优先级来应用样式

二、基础样式

2.1、背景属性

background-color：背景色，默认值是transparent(透明的)；颜色的取值：关键字（如red、blue）、16进制（如#000000、#cccccc、#ff0000）、rgb(0,0,0)、rgba(0,0,0,.5)
background-image：背景图，默认值是none(无图片)，通过url使用绝对或相对地址指定图片，如background-image: url(“images/img.jpg”);
background-repeat：背景图是否重复
background-size：背景图大小
background-position：背景图位置（相对于外层容器）
background-attachment：背景图是否随内容滚动，scroll（默认值，随页面滚动）、fixed（不随页面滚动）

2.2、字体属性

color：颜色，支持关键字、16进制、rgb、rgba四种
font-style：字体样式（默认normal正常、italic斜体）
font-size：大小，通过像素px指定
font-family：字体，默认字体由浏览器确定，如font-family:microsoft YaHei;、font-family:“Microsoft YaHei”,“Simsun”,“SimHei”;等
font-weight：粗细，默认normal、bold粗体、bolder大粗体、lighter细体、100-900范围值（400等于normal，700等于bold）
letter-spacing：字间距，px
opacity：透明度，默认1不透明，0完全透明，取值0-1
overflow：当内容溢出元素框时hidden隐藏、auto自动、scroll显示滚动条
text-overflow：让溢出的文字以省略号显示，取值ellipsis、clip
white-space：让文字在同一行显示，不换行，取值nowrap

2.3、文本属性

text-align：对齐，取值left 、center 、right
text-decoration：文字有无装饰，默认为none，underline 下划线、overline上划线、line-through删除线
text-transform：大小写设置，capitalize首字母大写、uppercase全大写、lowercase全小写
text-indent：缩进，指定文本的第一行的缩进，如：p {text-indent:2em;}，1em默认为16px
word-wrap：设置当前行超过指定容器的边界时是否换行，取值break-word为文本自动换行，如超长单词
vertical-align：垂直对齐，middle
line-height：行高，不能为负值

2.4、常见选择器

2.4.1、全局选择器

*.，可以与任何元素匹配，常用于设置一些默认样式，优先级最低

2.4.2、元素选择器

html元素，如p、b、div、a、img、body等

2.4.3、类选择器

.className{ }，类名可以重复，不能以数字开头

2.4.4、ID选择器

#idName{ }，id不能重复

2.4.5、合并选择器

选择器1,选择器2,...{ }，抽取公共样式，提供代码重用性

2.4.6、关系选择器

后代选择器 (E F)：选择所有被E元素包含的F元素，中间用空格隔开

ul li{ color:green; }
	<ul>
        <li>java</li>
        <li>python</li>
        <li>js</li>
    </ul>

子代选择器 (E > F)：选择所有作为E元素的直接子元素F，对孙子元素不起作用

	div>a{ color:red;}   //div下的一级子元素a
	
	<div>
     	 <a href="#">这是子元素（选中）</a>
      	 <p><a href="#">这是孙子元素（不选中）</a></p>
	</div>

相邻兄弟选择器 (E+F)：选择紧贴在E元素之后F元素，用加号表示，选择相邻的第一个兄弟元素

	p+span{ color:red;}   //只会选中第一个span
	
     <p>这是p元素</p>
     <span>第一个span元素（选中）</span>
     <span>第二个span元素（不选中）</span>

通用兄弟选择器 (E~F)：选择E元素之后的所有兄弟元素F，作用于多个元素，用~号隔开

	p~span{ color:red;}	   //和p之后平级的span元素都被选中了，有几个选中几个

    <span>在p元素之前（不选中）</span>    
    <p>这是p元素</p>
    <span>第一个span元素（选中）</span>
    <span>第二个span元素（选中）</span>

2.4.7、属性选择器

通过html的属性来选择元素，

class即是属性，p1是class的属性值；
格式：元素[ 属性名= “属性值”] ，等号不固定，可换其它符号
E[att]：选择具有attr属性的E元素

	p[class]{ color:red;}    //选择带有class属性的p标签

    <p class="p1">选中</p>
    <p class="p2">选中</p>

E[att="val"]：选择具有att属性且属性值等于val的E元素

	p[class="p2"]{ color:red;}    //选择p元素里class等于p2的元素

    <p class="p1">不选中</p>
    <p class="p2">选中</p>

E[att~="val"]：选择有att属性的元素，且属性值列表中有一个符合val的元素

	p[class~="p1"]{ color:red;}    //选中p元素下class值包含p1的元素

	<p class="p1 paragraph p11">选中</p>
    <p class="p1paragraph p11">不选中</p>  
    <p class="p1">选中</p>

E[att^=“val"]：选择E元素中有att属性，且以”val”开头的元素

	p[class^="p"]{ color:red;}  //选择带有class属性，属性值以p开头的元素

    <p class="p1 paragraph p11">选中</p>
    <p class="p1paragraph p11">选中</p>
    <p class="p1">选中</p>

E[att$=“val"]：选择具有att属性且属性值为以val结尾的字符串的E元素

	p[class$="p"]{ color:red;}     //选择p元素中class属性值以p结尾的元素

	 <p class="p1 paragraph p11p">选中</p>  
	 <p class="p1paragraph p11">不选中</p>

E[att*=“val"]：选择具有att属性且属性值包含val的字符串的E元素

	p[class$="p"]{ color:red;}     //选择p元素中class属性值以p结尾的元素

	 <p class="p1 paragraph p11p">选中</p>  
	 <p class="p1paragraph p11">选中</p>

E[att|="val"]：选择具有att属性，并且属性值用“链接符隔开”，以val开头的元素

	div[class|="xyz"]{ color:red;}   //div里class类名中有链接符，并且以xyz开头的元素

     <div class="xyz-work">选中</div>
     <div class="work-xyz">不选中car</div>

2.4.8、伪类选择器

伪类通过冒号来定义，它定义了元素的状态，如点击按下、点击完成等，实现元素状态动态切换；
E:link：设置超链接样式（访问前）

a:link{ color:red;}

E:visited：设置超链接样式（访问后）

a:visited{ color:green;}

E:hover：鼠标悬停时的样式（不限于a标签）

	a:hover{ color:red;}
    p:hover{ color:red;}
    <a href="#">这是个超级链接</a>
    <p>这是个段落</p>

E:active：鼠标按下时的样式（不限于a标签）

	a:active{ color:red;}
    p:active{color:yellow;}
    div:active{ color:blue;}
    <a href="#">百度</a>
    <p>这是段落</p>
    <div>这是div</div>

E:not(xx选择器)：匹配不含有xx选择器的元素E

	 div:not(.d1){ color: red;} //选择除了类名为d1的元素，not()中的值不加引号

    <div class="d1">块元素</div>
    <div class="d2 d1">块元素</div>
    <div class="d2" id="div2">块元素</div>

E:first-child：父元素的第一个子元素E

	ul:first-child{ color:red;}
	<ul>
        <li>选中</li>
        <li>不选中</li>
        <li>不选中</li>
    </ul>

E:last-child：父元素的最后一个子元素E

	ul:last-child{ color:red;}
	<ul>
        <li>不选中</li>
        <li>不选中</li>
        <li>选中</li>
    </ul>

E:only-child：E元素是唯一的子元素时被匹配

	ul:only-child{ color:red;}	//多个子元素时无效果
	<ul>
        <li>选中</li>
    </ul>

E:empty：匹配没有任何子元素（并且不包括text节点）的元素E

 p:empty{ border:1px solid red;padding:10px;}

    <p></p>     //无子元素（匹配）
    <p>我是一个p元素</p>   //有text文本节点（不匹配）
    <p><a href="#">百度</a></p>   //有子元素（不匹配）

E:checked：匹配用户界面上处于选中状态的元素E

input:checked+span{color:red;}   

<input type="radio" name="sex"/><span>男生</span>
<input type="radio" name="sex" checked="checked"/><span>女生</span>

E:nth-child()：选中第几个子元素

.box p:nth-child(2){color: red;}  //选中第二个p元素
.box p:nth-child(even){color: red;}  //选中第偶数个子元素
.box p:nth-child(odd){color: red;}  //选中第奇数个子元素

<div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

三、盒子模型

3.1、简介

3.1.1、概念

盒子四区域：内容(content)、边框(border)、内边距/填充(padding)、外边距/边界(margin)
对象实际宽度=左侧外边距+左侧边框+左侧内边距+宽度+右侧内边距+右侧边框+右侧外边距
在这里插入图片描述

3.1.2、border边框

三要素：宽、样式、颜色
分开写法：
border-width: 1px; //不写width会有默认3像素的值
border-style: solid; //为空时边框不显示；常见样式dotted（点状）、solid（实线）、double（双线）、dashed（虚线）、none（无边框）
border-color: red; // 不写颜色会默认为黑色
合并写法：
border: 1px solid red;

3.1.3、margin外边距

格式：margin:value，围绕在元素边框周围的空白区域，外边距是透明的；
取值：margin-top/right/bottom/left: value; （value可为像素，%，auto，负值）
写法：margin:value(四个方向相同)、 margin: value(上下) value(左右)、margin: value(上) value(左右) value(下)、margin: value(上) value(右) value(下) value(左)
合并：当两个垂直外边距相遇时，即外边距合并，高度等于两个发生合并的外边距的高度中的较大者（如图所示）
在这里插入图片描述
特点：1、块级元素的垂直相邻外边距会合并；2、行内元素实际上不占上下外边距，行内元素的的左右外边距不合并；3、浮动元素的外边距也不会合并；4、允许指定负的外边距值；

3.1.4、padding内边距

格式：padding:value;，内容区域和边框之间的空间
取值：padding-top/right/bottom/left:value;（value可为像素，百分比，不能为负数）
写法：padding:value(四个方向相同) 、padding: value(上下) value(左右)、padding: value(上) value(左右) value(下)、padding: value(上) value(右) value(下) value(左)

3.2、标准盒模型

符合W3C规范的标准例子模型，即上文所述；

3.3、怪异盒模型

怪异盒子即IE的盒子模型，它也包括 margin、border、padding、content，但和标准盒子模型不同的是IE 盒子模型的宽，包含了 border 和 pading；

3.4、弹性盒模型

即伸缩盒模型flexbox，使用该模型，可以轻松的创建“自适应”浏览器窗口的流动布局；
设置了弹性盒模型后，float，clear和vertical-align在flex中不起作用；
新旧版本写法：
最老版本：display:box;
过渡版本：display:flexbox;
最新版本：display:flex;

3.5、浏览器内核及前缀

Gecko内核：前缀为-moz- （火狐浏览器）
Webkit内核：前缀为-webkit- （谷歌、safari、360极速、世界之窗、猎豹等，chrome浏览器最先开发使用，也叫谷歌内核）
Trident内核：前缀为-ms- （也称IE内核）
Presto内核：前缀-o- （只有opera采用）

四、定位与浮动

定义元素框相对于其正常位置应该出现的位置

4.1、浮动float

语法：float:none/left/right;
浮动方式：浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止；
特点：浮动定位不在页面中占据空间；不会互相重叠；不会上下浮动；外边缘不会超过其父元素的内边缘；行内元素浮动后会变为块级元素；
举例：
1）框1向左浮动，它脱离文档流并且向左移动，直到它的左边框碰到包含框的左边缘
在这里插入图片描述
2）框1向右浮动，则它脱离文档流并且向右移动，直到它的右边框碰到包含框的右边框

3）三个框都向左移动，那么框1向左浮动直到遇到包含框，另外两个框向左浮动直到碰到前一个浮动框，三个框在同一行显示
在这里插入图片描述
4）如果包含框太窄，那么其他浮动块会自动向下移动，直到有足够的空间；如果浮动元素的高度不同，那么当他们向下移动时可能被其他浮动元素卡住

清除浮动：
clear属性，取值left、right、both
常用方式：结尾处加空div标签 clear:both、浮动元素的父级div定义伪元素::after、浮动元素的父级div定义 overflow:hidden、浮动元素的父元素定高

4.2、定位position

absolute：绝对定位，left/top/right/bottom
fixed：固定定位，left/top/right/bottom
relative：相对定位
static：默认值，无定位

4.3、堆叠z-index

z-index属性：控制元素框出现的重叠顺序，仅能在定位的元素上生效；
属性为数值，越大表示堆叠顺序越高；可以设置为负值；

4.4、display

常见属性值：none（隐藏对象）、 inline（指定对象为内联元素）、block（指定对象为块元素）、inline-block（指定对象为内联块元素）、table-cell（指定对象作为表格单元格）、flex（弹性盒）

4.5、隐藏

visibility:hidden和opacity:0会将元素隐藏，但是物理空间实际存在；
display:none影藏元素，不保留物理空间

为谁攀登

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css基础知识

目录一、css简介1.1、概念1.2、使用方式1.2.1、内联方式1.2.2、内部样式表1.2.3、外部样式表1.2.4、导入式1.2.5、优先级1.2.6、link和@import的区别1.3、特征1.3.1、继承性1.3.2、层叠性1.3.3、优先级1.4、选择器1.4.1、全局选择器1.4.2、元素选择器1.4.3、类选择器1.4.4、ID选择器1.4.5、合并选择器二、css基础样式2.1、背景2.1.1、background-color2.1.2、background-image2.2、字体属性2
复制链接

扫一扫