一、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图标设置：

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：首页样式