CSS基础(基于黑马程序员视频的学习笔记)

  • CSS基础(基于黑马程序员视频的学习笔记)已关闭评论
  • 161 次浏览
  • A+
所属分类:Web前端
摘要

选中所有的该标签 所有标签都有class属性,class属性的属性值称为类名 类名可以由数字、字母、下划线、中划线组成,但不能以数字或中划线开头


一、CSS选择器

1、标签选择器

  • 选中所有的该标签

标签名 {
CSS属性名:属性值;
}

2、类选择器

.类名 {
CSS属性名:属性值;
}
  • 所有标签都有class属性,class属性的属性值称为类名

  • 类名可以由数字、字母、下划线、中划线组成,但不能以数字或中划线开头

  • 一个标签可以有多个类名,类名之间以空格隔开

  • 类名可以重复,一个类选择器可以选中多个标签

3、id选择器

#id {
CSS属性名:属性值;
}
  • 所有标签都有id属性

  • id属性在一个页面中不可重复

  • 一个标签只能有一个id

  • 一个id选择器只能选中一个标签

4、通配符选择器

* {
CSS属性名:属性值;
}

选中所有标签

如果给同一个标签设置了相同的属性,此时样式会重叠,写在下面的会生效

p {
color:red;
color:blue;
}
/* p标签会显示为蓝色 */

5、后代选择器

选择器1 选择器2 {CSS}(有空格)

后代包括:孩子,孙子,重孙。。。

6、子代选择器

只包括孩子一代

选择器1>选择器2 {CSS}

7、并集选择器

选择器1,选择器2{CSS}

并集选择器中的每组选择器可以是基础选择器或者复合选择器

8、交集选择器

选择器1选择器2{CSS}(无空格)

如:p标签且class="box"

p.box{CSS}

9、hover伪类选择器

选择器:hover{CSS}

伪类选择器选中的元素的某种状态,任何标签都可以添加伪类

 

二、字体和文本样式

1、字体样式

默认字号是16

font-size:字体大小

font-weight:字体粗细

font-style:字体样式

font-family:字体

font-family:微软雅黑,黑体,sans-serif;
/* 表示如果用户电脑没有安装微软雅黑,则按黑体显示,若没有安装黑体,则按任意一种非衬线字体显示 */

font复合属性:font:style weight size/line-through family;

只能省略前两个属性,相当于设置了默认值

 

2、文本样式

缩进:

text-indent:xxpx/xem;

em:一个字的大小

 

水平对齐:

text-align:left/center/right;

文本spanainputimg水平居中,text-align需要给以上标签的父级标签

标签居中总结:margin:0 auto

 

文本修饰:

text-decoration:underline/line-through/overline/none;

underline:下划线,line-through:删除线,overline:上划线,none:无装饰线

 

行高:

line-height:xxpx/font-size的倍数; 注意:行高=上间距+文本高度+下间距

使用font:style weight size/line-through family;时,注意覆盖问题

 

三、背景

1、背景颜色 | 图

background-color:可以设置颜色/十六进制/rgb(a)

background-image:url(图片路径)

 

2、背景平铺

background-repeat属性

repeat:默认,水平和垂直方向都平铺

no-repeat:不平铺

repeat-x:沿x轴平铺

repeat-y:沿y轴平铺

 

3、背景位置

background-position:水平方向位置 垂直方向位置;

水平:left center right

垂直:top center bottom

或者均采用px移动,(以父容器左上角为原点)正数向右向下移动,负数向左向上移动

 

4、复合属性(不要求顺序)

推荐写法:background:color image repeat position

 

四、元素显示模式

1、块级元素

div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer...

可以设置宽高,独占一行

 

2、行内元素

a、span、b、u、i、s、strong、ins、em、del...

不可以设置宽高,一行可以显示多个

 

3、行内块元素

input、textarea、button、select...

特殊情况:img标签有行内块特点,但是Chrome调试工具中是inline

一行可以显示多个,可以设置宽高

 

4、元素显示模式转换

display:block:转换成块级元素

display:inline-block:转成行内块元素

display:inline:转成行内元素

 

TIPS:标签嵌套注意点

1、块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等等......

但是p标签中不要嵌套div、p、h等块元素

2、a标签内部可以嵌套任意元素,但不能嵌套a标签

 

五、CSS特性

1、继承性

子元素默认继承有父元素样式的特点

常见的可继承属性:color、font-style、font-weight、font-size、font-family、text-align、text-indent、line-height...

(控制文字的属性都能继承,反之)

继承失败的情况:a标签的color、h系列标签的font-size

 

2、层叠性

注意:当样式冲突时,当选择器优先级相同时,才能通过层叠性判断结果

 

3、优先级

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

!important写在属性值的后面,分号的前面,且不能提升继承的优先级

如:

div{
color:green !important;
}

如果优先级相同,则按行内、id、类、标签的顺序比较选择器个数,个数多的优先级高

 

六、盒子模型

CSS规定每个盒子由内容区域content内边距区域padding边框区域border外边距区域margin构成,这就是盒子模型

1、内容content

width、height默认设置盒子内容大小

 

2、边框border

border:10px solid red (不分先后顺序)

分别表示边框方向,边框粗细,边框线类型,边框颜色 solid实线、dashed虚线、dotted点线

也可以使用单独属性:border-方位词/width/style/color,但更常用符合属性

 

3、内边距padding

padding属性可以当作符合属性使用,最多可以取四个值,表示上右下左;两个值表示上下 左右;三个值表示上 左右 下

盒子模型最终大小 = width/heigth + 2*border + 2*padding

给盒子设置属性box-sizing:border-box;,浏览器会自动计算多余大小,自动在内容中减去,无需计算border和padding给盒子大小造成的影响

 

4、外边距margin

设置方式同padding

浏览器会给部分标签默认设置margin和padding,但一般在项目开始时需要清楚默认样式,所以需:

* {
margin:0;
padding:0;
}

 

外边距问题

折叠问题:

垂直布局的块级元素,上下的margin会合并(取最大值)

解决方案:只给设置一个元素margin

塌陷问题:

互相嵌套的块级元素,子元素的margin-top会作用在父元素上,导致父元素一起往下移动

解决方案:给父级元素设置border-toppadding-top、给父级元素设置overflow:hiden、转换成行内块元素、设置浮动

行内元素的垂直内外边距:

无法通过paddingmargin改变行内标签的位置

解决方法:加行高

 

七、浮动

1、结构伪类

E:first-child{} :匹配父元素中第一个子元素,并且是E元素

E:last-child{} :匹配父元素中最后一个子元素,并且是E元素

E:nth-child(n){} :匹配父元素中第n个子元素,并且是E元素

E:nth-last-child(n){} :匹配父元素中倒数第n个子元素,并且是E元素

注:n可以为0、1、2、3...或公式,如even(基数)、odd(偶数)、-n+5(找到前五个)、n+5(从第五个开始往后)

 

2、伪元素

一般页面中的非主题元素可以使用伪元素,是由CSS(非HTML) 模拟出的标签效果

::before:在父元素内容的最前面添加一个伪元素

::after:在父元素内容的最后面添加一个伪元素

伪元素必须设置content属性才能生效,且默认是行内元素

/* 示例 */
div::before{}
div::after{}

 

常见标准流规则:

块级元素:从上往下,垂直布局,独占一行

行内(块)元素:从左往右,水平布局,空间不够自动拆行

 

3、浮动

浏览器解析行内(块)元素时,如果代码有换行,则会有间距

浮动早期用于图文环绕,现在则用于网页布局

{
float:left/right;

}

特点:

  • 浮动元素会脱离标准流,在标准流中不占据位置

  • 浮动元素会比标准流高半个级别,可以覆盖标准流中的元素

  • 下一个浮动元素会在上一个浮动元素的左右浮动

  • 浮动后的标签具有行内块特点

  • 添加浮动后margin对水平效果的调整不生效,因为浮动更高级

 

4、清除浮动

如果子元素浮动,则此时不能撑开标准流的块级父元素

方法:

  • 父元素添加高度

  • 额外标签法:在父元素内容的最后添加一个块级元素,并设置属性clear:both(但会让页面html结构更复杂)

  • 单伪元素清除

.clearfix::after{
content:'';
display:block;
clear:both;
/* 以下是补充代码,在网页中看不到伪元素;在高版本浏览器无区别,主要是为了适配低版浏览器 */
height:0;
visibility:hidden;
}
  • 双伪元素清除

/* before作用:解决外边距塌陷 */
.clearfix::before,
.clearfix::after{
content:'';
dispaly:table;
}
.clearfix:after{
clear:both;
}
  • 设置overflow:hidden

{
overflow:hidden;
}

 

八、定位

1、使用定位

设置定位方式:

  • position:属性名

  • static:静态定位(没用,不会改变位置)

  • relative:相对定位

  • absolute:绝对定位

  • fixed:固定定位

  • lr都有,以l为准,tb都有,以t为准

设置偏移值:

  • left、right、top、bottom

 

2、相对定位

position:relative

  • 占有原来的位置(不脱标)

  • 仍然具有原有标签的显示特点

  • 改变位置参照原位置

应用场景:

  • 配合绝对定位(子绝父相)

  • 用于小范围的移动

 

3、绝对定位

position:absolute

  • 不占有原来的位置(脱标)

  • 改变标签的显示特点(变成行内块特征)

  • 先找已定位的父级(大多采用相对,就近原则),若有就以这个父级为参照物进行定位;若无已定位的父级,以浏览器窗口为参照物进行定位

应用场景:

  • 子绝父相

 

3、居中

绝对定位的盒子无法使用margin:0 auto

  • 定位居中

/* 水平居中 */
position:absolute;
left:50%;
margin-left:-???px; /*盒子宽度一半*/

/* 垂直居中 */
position:absolute;
top:50%;
margin-top:-???px; /*盒子高度一半*/
  • 位移居中

/* 位移自己宽高的一半 */
transform:translate(-50%,-50%);

 

4、固定定位

position:fixed

  • 不占据原来位置(脱标)

  • 改变位置参考浏览器窗口

  • 具有行内块特点

 

5、显示层级

  • 默认情况下,定位的盒子后写的居上

  • z-index:整数,取值越大,显示顺序越靠上,默认取值0

  • z-index必须配合定位才生效

 

6、装饰

① vertical-align

  • baseline:默认,基线对齐

  • top:顶部对齐

  • middle:中间对齐

  • bottom:底部对齐

浏览器遇到行内和行内块元素当作文字处理,默认按照基线对齐,可以通过vertical-align:middle居中,也可以display:block;处理

.father{
width:600px;
height:600px;
line-height:600px;
/* 水平居中 */
text-align:center;
}

img{
/* 垂直居中 */
vertical-align:middle;
}

 

② 光标类型:

cursor

  • default:默认值,通常是箭头

  • pointer:手,提示用户可以点击

  • text:工字型,提示用户可以选择文字

  • move:十字光标,提示用户可以移动

 

③ 边框圆角

border-radius:数字/百分比

  • 最大取值50%,即正圆

  • 从左上角开始赋值,然后顺时针,没有赋值看对角

 

常见应用:

  • 正圆

    • 盒子必须是正方形

    • 设置border-radius:50%

  • 胶囊按钮

    • 盒子必须是长方形

    • 设置border-radius:盒子高度一半

 

④ 溢出部分显示效果

overflow

  • visible:默认值,溢出部分可见

  • hidden:溢出部分隐藏

  • scroll:无论是否溢出,都显示滚动条

  • 根据是否溢出,自动显示或隐藏滚动条

 

⑤ 元素本身隐藏

  • visibility:hidden:占位隐藏

  • dispaly:none(常用):不占位隐藏

 

⑥ 元素整体透明度(拓展)

opacity:0~1之间的数字

opacity会让元素整体透明,包括其中的文字、图片

 

九、项目样式补充

1、精灵图

项目中将多张小图片合成一张大图片,成为精灵图

优点:减少服务器发送次数,减轻服务器压力,提高页面加载速度

  • 不能用img标签引入精灵图,会全部显示

  • 精灵图的标签使用行内标签:spanbi...

/* 设置背景图片和位置 */
background-image:url();
background-position:水平位置 垂直位置;

设置背景图片大小background-size

  • ??px

  • 百分比:相当于当前盒子自身的宽高百分比

  • contain:包含,等比缩放,直到不会超出盒子的最大

  • cover:覆盖,等比缩放,直到刚好填满整个盒子没有空白

background连写:background:color image repeat position/size;

 

2、盒子阴影

box-shadow

  • h-shadow:必须,水平偏移量,允许负值

  • v-shadow:必须,垂直偏移量,允许负值

  • blur:可选,模糊度

  • spread:可选,阴影扩大

  • color:可选,阴影颜色

  • inset:可选,将阴影改为内部阴影

  • 值都是px

 

3、过渡

transition

  • 过渡的属性

    • all:所有能过渡的属性都过渡

    • 具体属性名:width:只有width过渡

  • 过渡的时长:?s

  • 默认状态和hover状态样式不同,才能有过渡效果

  • transition属性给需要过渡的元素本身加

  • transition给默认状态设置,鼠标移入移出都有效果

  • transitionhover状态设置,移出没有效果

/* 过渡配合hover使用,谁变化给谁加过度属性 */
.box{
width:200px;

transition:width 1s background-color 2s;
/* 若变化的属性多,直接写all
transition:all 2s;
*/
}

.box:hover{
width:600px;

}

 

4、SEO

SEO(Search Engine Optimization):搜索引擎优化,让网站在搜索引擎排名靠前

提升SEO常见方法:

  • 竞价

  • 将网页制作成html后缀

  • 标签语义化(在合适的地方使用合适的标签)

  • ......

SEO三大标签:

  • title:网页标题标签

  • description:网页描述标签

  • keywords:网页关键字标签

 

5、favicon

显示在标签页左侧的小图标,习惯使用ico格式、

ico图标设置:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

 

6、项目结构搭建

  • 新建项目文件夹 xtx-pc-client,在VScode中打开

    • 在实际开发中,项目文件夹不建议使用中文

    • 所有项目相关文件都保存在xtx-pc-client目录中

  • 复制favicon.icoxtx-pc-client目录

    • 一般习惯将ico图标放在项目根目录

  • 复制 imagesuploads目录到xtx-pc-client目录中

    • images :存放网站固定使用的图片素材,如: logo、样式修饰图片...等

    • uploads:存放网站非固定使用的图片素材,如:商品图片、宣传图...等

  • 新建index.html在根目录

  • 新建 CSS文件夹保存网站的样式,并新建以下CSS文件:

    • base.css:基础公共样式

    • common.css:该网站中多个网页相同模块的重复样式,如:头部、底部

    • index.css:首页样式