文章目录
前言 一、CSS选择器1.基础选择器2.复合选择器 二、CSS盒模型1.组成2.圆角边框3.盒子阴影4.文字阴影 三.浮动1.浮动特性2.清除浮动 总结前言
经过一段时间web前端的学习,我大致了解了CSS的作用,CSS是层叠样式表(Cascading Style Sheets)的简称。
CSS也是一种标记语言。
CSS主要用于设置HTML页面中的文本内容(字体、大小、对其方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
一、CSS选择器
1.基础选择器
基础选择器分为4个选择器:
1.标签选择器:用HTML标签名称作为选择器,按标签名分类,为页面中某一类标签指定统一的CSS样式。
2.类选择器:如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。
语法:
结构需要用class属性来调用class类的意思。
在CSS中,类选择器用一个点“.”号显示。
可以多次调用。
3.id选择器:id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS中id选择器以“#”来定义。
只能调用一次,别人请勿使用。
4.通配符选择器:在CSS中,通配符选择器使用“*”定义,它表示选取页面中所有元素(标签)。
通配符选择器不需要调用,自动就给所有的元素使用样式。
注意:在类选择器中,有多类名选择器:
1.可以把一些标签元素相同的样式(共同的部分)放到一个类里面。
2.这些标签都可以调用这个公共的类,然后再调用自己独有的类。
3.从而节省CSS代码,统一修改也非常方便。
2.复合选择器
复合选择器分为5个选择器:
1.后代选择器:又称包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
语法:元素1 元素2 { }
元素1时父级,元素2是子集。
2.子选择器:子元素选择器只能选择作为某元素的最近一级子元素,
元素1>元素2
元素1和元素2中间用大于号隔开
3.并集选择器:可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明。
各选择器用英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。
4.交集选择器:交集选择器又两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,语法如;h3.class{color:redd font-size:25px;}(不加空格)
5.伪类选择器:伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示,比如:hover、:first-child。
二、CSS盒模型
1.组成
css盒模型由4个部分组成
1.边框border:border-width:定义边框的粗细,单位是px
border-style:边框的样式
border-color:边框的颜色
边框简写:
border:1px solid red;没有顺序
边框分开写法:
border-top 只设定上边框
border-bottom 只设定下边框
border-right 只设定右边框
border-left 只设定左边框
2.内边距padding:padding属性用于设置内边距,即边框与内容之间的距离。
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
3.外边距margin:margin属性用于设置外边距,即控制盒子和盒子之间的距离。
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
4.内容content:文本里面的内容
代码如下(示例):
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {background-color: #f5f5f5;}a {color: #333;text-decoration: none;}.box {width: 298px;height: 415px;background-color: #fff;margin: 100px auto;}.box img {width: 100%;}.review {height: 70px;font-size: 14px;padding: 0 28px;margin-top: 30px;}.appraise {font-size: 12px;color: #b0b0b0;margin-top: 20px;padding: 0 28px;}.info {font-size: 14px;margin-top: 15px;padding: 0 28px;}.info h4 {display: inline-block;font-weight: 400;}.info span {color: #ff6700;}.info em {font-style: normal;color: #b0b0b0;margin: 0 6px 0 15px;}</style></head><body><div class="box"><img src="../images/box.png" alt=""><p class="review"><a href="#">快递牛,整体不错蓝牙可以说秒连。红米给力</a></p><div class="appraise">来自于32135489的评价</div><div class="info"><h4><a href="#">Redmi AirDots真无线蓝...</a></h4><em>|</em><span>99元</span></div></div></body></html>
效果如下:
2.圆角边框
border-radius属性用于设置元素的外边框圆角
语法:border-radius:length;
radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果。
参数值可以为数值或百分比的形式。
如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写50%。
如果是个矩形,设置为高度的一半就可以做。
该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角。
分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
3.盒子阴影
h-shadow 必写,水平阴影的位置。允许负值。
v-shadow 必写,垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。
inset 可选。将外部阴影改为内部阴影。
默认的是外阴影,但是不可以写这个单词,否则导致阴影无效。
盒子阴影不占用空间,不会影响其他盒子排列。
4.文字阴影
text-shadow:
h-shadow 必写。水平阴影的位置。允许负值。
v-shadow 必写。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。
三.浮动
1.浮动特性
1.浮动元素会脱离标准流(脱标)
脱离标准普通流的控制移动到指定位置
浮动的盒子不再保留原先的位置
2.浮动的元素会一行内显示并且元素顶部对齐
注意:浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。
3.浮动的元素会具有行内块元素的特性
如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定
浮动的两个注意点
1.浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。
2.一个元素浮动了,理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
2.清除浮动
清除浮动的本质是清除浮动元素脱离标准流造成的影响
为什么需要清除浮动
1.父级没高度
2.子盒子浮动了
3.影响下面布局了,我们就应该清除浮动了