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

摘要

选中所有的该标签 所有标签都有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;

让文本、span、a、input、img水平居中，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-top或padding-top、给父级元素设置overflow:hiden、转换成行内块元素、设置浮动

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

无法通过padding或margin改变行内标签的位置

解决方法：加行高

 

七、浮动

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标签引入精灵图，会全部显示

• 精灵图的标签使用行内标签：span、b、i...

/* 设置背景图片和位置 */
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给默认状态设置，鼠标移入移出都有效果

• transition给hover状态设置，移出没有效果

/* 过渡配合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.ico到xtx-pc-client目录

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

• 复制 images和uploads目录到xtx-pc-client目录中

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

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

• 新建index.html在根目录

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

  • base.css：基础公共样式

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

  • index.css：首页样式