目录

html

CSS

css写在哪里？

css的选择器

元素（标签）选择器

类选择器

id选择器

通配符选择器*

派生选择器

伪类选择器

伪元素选择器

选择器的优先级

css背景的相关属性

css文字的相关属性

css布局定位

简介

float 浮动布局

flex 弹性布局

position 定位布局

grid 网格布局

水平垂直居中

css 常用属性

html

  • meta标签

    • 自结束标签
    • 可以提供该网页相关信息,元数据
    • charset="utf-8"：中文的网页需要用到的声明编码，否则会出现乱码
    • name="keywords" content="静夜思,诗词"：提供搜索网页的关键字，关键字用,隔开
    • name="Description"：描述网页的信息
    • name="viewport"：网页开发移动端页面适配

加粗：strong

斜体：em

表格：table

table：HTML 表格

  • tr：元素定义表格行
  • th：数据中的表头单元格
  • td：表示单元格

table元素里常用的属性

  • border(边框)
  • cellspacing(规定单元格之间的空白)
  • cellpadding(规定单元边沿与其内容之间的空白)
  • colspan(用于合并列)
  • rowspan(用于合并行)

块级标签

<h1>, <p>, <ul>, <table>,<div>

行内标签

<b>, <td>, <a>, <img>,<span>

CSS

  • css写在哪里？

方式一：内部样式表
        写在元素的style标签里面的

示例：

<style>/* 这里写css样式 */
</style>

方式二：内联样式表
        写在styles属性里面的

示例：

<div style="width: 100px;"></div>

方式三：外部样式表

link标签将css资源引⼊

示例：

<link rel="stylesheet" href="./index.css">

  • css的选择器

元素（标签）选择器

<style>/* 直接使用 标签 编写 css 样式 */div {color: red;}/* 元素选择器的组合使用，多个标签使用相同的样式，用英式逗号分隔 */div, p {color: blue;}
</style>
<body><div>Hello</div><p>world</p>
</body>

类选择器

<style>/* 样式中通过 英式 .类名 的方式获取到指定的标签 */.test {color: red;}
</style>
<body><!-- 标签中使用属性 class 给标签定义一个类选择器名称 --><div class="test">Hello</div>
</body>
<style>/* 2：样式如果想指定只有特定的标签使用此样式，可以选择组合的方式 */div.test {color: red;}
</style><body><!-- 1：当标签中有多个相同名称的类选择器名称 --><div class="test">Hello</div><p class="test">world</p>
</body>
<style>/* 2： 可以使用一个类名设置样式，也可以使用链接多个类名的方式设置样式链接多个类名的时候，必须保证这些类名在同一个标签中都存在样式才生效*/.test1.test2 {color: red;}
</style>
<body><!-- 1：定义一个多个类名的选择器 --><div class="test1 test2">Hello</div>
</body>

id选择器

注意：一个id选择器的属性值在html文档中只能出现一次，避免写js获取id时出现混淆

<style>/* 样式中通过 #名称 的方式获取到指定的标签 */#test {color: red;}
</style>
<body><!-- 标签中使用属性 id 给标签定义一个id选择器名称 --><div id="test">Hello</div>
</body>

通配符选择器*

<style>/* 使用 星号，设置全局样式，但是优先级低 */* {color: red;}
</style>
<body><div>Hello</div>
</body>

派生选择器

  • 后代选择器
<style>/* 标签里面包裹的标签，通过 标签拿到指定的后代(儿子、孙子)标签 */div i {color: red;}
</style>
<body><div><p><i>hello</i></p></div>
</body>
  • 子元素选择器
<style>/* 标签里面包裹的标签，通过 标签顺序拿到指定的儿子标签， 注意要按照标签顺序，且只能是下一级儿子级别的标签*/div>p>i {color: red;}
</style>
<body><div><p><i>hello</i></p></div>
</body>
  • 相邻兄弟选择器
<style>/* 先找到第一个p兄弟，是第二个p，那么第二个p就生效了。+p 继续找第二个p的兄弟，就找到了第三个p,那么第三个也生效了注意，相同的元素(哥哥是p，弟弟也是p) 一个+号的时候是循环，例如 p+p。超过一个+号的时候，是指定位置的地方开始找下面的兄弟*/p+p {color: red;}
</style>
<body><div><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p></div>
</body>

伪类选择器

:first-child {} //第一项
:last-child {} //最后一项
:nth-child(n) {} //第n项
:nth-child(2n+1) {} //奇数项
:nth-child(2n) {} //偶数项
:not(:nth-child(n)) //否定伪类 除了第n项

a:link {color:#FF0000;} /*未访问的链接*/
a:visited {color:#00FF00;} /*已访问的链接*/
a:hover {color:#FF00FF;} /*鼠标移动到链接上*/
a:active {color:#0000FF;} /*点击时链接*/

伪元素选择器

::first-letter //第⼀个
::first-line //第⼀⾏ 只能⽤于块级元素
::selection //选中
::before //在开始位置新增
::after //在结束位置新增

选择器的优先级

1：!important                // 最高

2：⾏内样式

3：id选择器

4：类选择器

5：标签选择器

6：通配符选择器          // 最低

margin的外边框折叠问题

  • 上下两个兄弟盒子的margin都为正取大，都为负取小，一正一负相加
  • 父子元素盒子的margin（假设没有内边距或边框把外边距分隔开），也会合并（意思是修改父的盒子属性子的也会生效，修改子的盒子属性父的也会生效）；只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并 
    // 解决父子边距合并：
父元素{overflow:auto;
}
父元素::before{display: table;content: "";
}

  • css背景的相关属性

background-image         // 设置背景图片，取值 url("")
background-repeat        // 设置背景图片的平铺方案* repeat 背景图像将向垂直和水平方向重复。这是默认* repeat-x  只有水平位置会重复背景图像* repeat-y 只有垂直位置会重复背景图像* no-repeat    background-image 不会重复
background-size          // 设置背景图片的大小
background-position      // 设置背景图片的起始位置
background-color         // 设置背景颜色，取值 #fff

  • css文字的相关属性

font-size    // 字体大小，最小12px
font-weight // 是否加粗，取值* normal   默认值。定义标准的字符。* bold      定义粗体字符。* bolder 定义更粗的字符。* lighter   定义更细的字符。* 100-900   越小越细，越大越粗
font-style  // 是否斜体，取值* normal   默认值。浏览器显示一个标准的字体样式。* italic 浏览器会显示一个斜体的字体样式。* oblique   浏览器会显示一个倾斜的字体样式。
font-family // 字体
text-indent // 文本缩进
text-align  // 文本水平(左右)对齐，取值* left   把文本排列到左边。默认值：由浏览器决定。* right  把文本排列到右边。* center   把文本排列到中间。* justify  实现两端对齐文本效果
text-height // 字体行高

  • css布局定位

简介

正常元素怎么布局？

  • 默认，一个块级元素的内容宽度就是其父元素的100%，他的高度和其内容高度一致
  • 行内元素它的宽度和高度度都是根据内容决定的(无法设置行内元素的宽高)

可设置display属性，定义元素的类型(css3定义布局)，给行内元素设置宽高

    span {/* 行内元素，设置成行内块级元素，不独占一行，这样就可以设置宽高了 */display: inline-block;  /* 行内元素，设置成块级元素，独占一行，这样就可以设置宽高了 */display: block;}

float 浮动布局

  • 使用

float: none;    //默认值，元素不浮动
float: left;    //元素向左浮动
float: right;    //元素向右浮动

  • 特点
  • 浮动元素会脱离文档流，不再占据文档流空间
  • 浮动元素彼此之间是从左往右排列，宽度超过一行自动换行
  • 在浮动元素前面元素不浮动时，浮动元素无法上移
  • 块级元素和行内元素浮动之后都变成行内块级元素
  • 浮动元素不会盖住文字，可以设置文字环绕效果   // 浮动设计之初的目的

清除浮动

div::after {clear: both;content: '';display: block;
}

flex 弹性布局

  • 使用
  • 父元素属性

/* 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。*/
display: flex;

/* 决定主轴的方向（即子元素的排列方向）row：横向排版，row-reverse：横向排版颠倒

column：纵向排版，column-reverse：纵向排版颠倒 */
flex-direction: row | row-reverse | column | column-reverse

/* 是否换⾏，父元素宽度固定的话，多个子元素超出父元素宽度那么子元素会等分父元素的宽度，子元素的宽度将失效，如果想让子元素的宽度生效，就要指定换行， */

flex-wrap: nowrap | wrap | wrap-reverse;

/* 定义⽔平⽅向对⻬⽅式(父元素要有宽度才生效)   flex-start：默认从左向右排版， flex-end：正序从右向左排版，center：正序居中排版，space-between：间隔均分父元素宽度排版，两侧紧挨父元素左右两侧，space-around：间隔均分父元素宽度排版，中间的间距是两侧的间距的两倍*/

justify-content: flex-start | flex-end | center | space-between | space-around;

/* 定义垂直方向对齐方式 flex-start：默认原效果，flex-end：放在下面，center：放在中间，baseline：以子元素中的内容的基线水平对齐的方式排版，stretch：子元素没有设置高度的话，使用父元素的高度*/
align-items: flex-start | flex-end | center | baseline | stretch;

/* 定义多个轴线（多行/多列）对齐方式，flex-start：父元素设置高度的话，第二行紧挨第一行排着，没有此参数的话，会均分父元素高度排，flex-end：从底部排，center：排在中间，space-between：垂直均分间隔，上下紧贴父元素， space-around：垂直均分间隔，上下距离父元素的高度是中间间距的一半*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

  • 子元素属性

/* 定义子元素的排列顺序，默认为0，数字越小排列越前，数字越大排列越后 */
order: -10 | -1 | 0 | 1 | 10;

/* 定义子元素的放大比例，默认为0，1：默认占据剩余的空间，2：是其他元素少的总和的2倍 */
flex-grow: 0 | 1 | 2 | 3;

/* 定义子元素是否可以缩小，默认为1可以缩小，0不可以 */
flex-shrink: 0 | 1;

/* 定义了在分配多余空间之前，子元素占据的主轴空间 */
flex-basis: <length> | auto;

/* flex-grow, flex-shrink 和 flex-basis的简写 */
flex: 0 1 auto;

position 定位布局

  • 使用
  • 父元素属性

/* 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素 */

position: relative (相对绝对)

/* 当页面滚动时，设置此属性的元素不跟着滚动，始终显示在固定的页面位置，"left", "top", "right"，"bottom"指定位置*/
position: fixed (固定定位)

/* 当页面滚动时，设置此属性的元素滚动到指定的位置时，不再滚动，"left", "top", "right"，"bottom"指定位置 */
position: sticky (粘性定位)

  • 子元素属性

/* 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right"，"bottom"属性进行移动 */

position: absolute (绝对定位)

  • 相关属性

/* 当定位的盒子重叠在一起，有遮挡住的时候可以使用，值越大图层放在越上面 */
z-index

grid 网格布局

  • 使用

/* 网格布局 */
display: grid;
/* 显示几列，几个值就是几列，数字是列宽 */
grid-template-columns: 10px 10px 10px;
/* 显示几行，几个值就是几行，数字是行高 */
grid-template-rows: 10px 10px 10px;

/* 百分比的方式 */
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;

/* repeat()函数简化 */
display: grid;
grid-template-columns: repeat(3, 33.33%);        // 第一个参数显示几列，第二个列宽
grid-template-rows: repeat(3, 33.33%);              // 第一个参数显示几行，第二个行高

  • 水平垂直居中

行内块元素

1.

line-height：取height相同的值
text-align: center
2.

display: flex;
justify-content: center;
align-items: center;

块级元素

1. position + margin 清楚子元素的宽高
父元素 {
    position: relative;
}
子元素{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}
2. position + transform 不清楚子元素的宽高
父元素 {
    position: relative;
}
子元素{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
3. flex
父元素{
    display: flex;
    justify-content: center;
    align-items: center;
}

  • css 常用属性

VH单位

/* css中高度不好获取，使用vh单位表示可以看到的页面的高度 */

height: 100vh;        // 表示可看到的页面的百分百高度

圆角

/* 四个值的顺序是：左上角，右上角，右下角，左下角 */

border-radius: 10px 10px 10px 10px;        border-radius: 50% // 圆形

阴影

/*

h-shadow       必需的。水平阴影的位置。允许负值
v-shadow       必需的。垂直阴影的位置。允许负值
blur                可选。模糊距离
spread           可选。阴影的大小
color              可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

*/

box-shadow: h-shadow v-shadow blur spread color

渐变

/* 从上到下，颜色可以写多个（默认情况下）*/
background-image: linear-gradient(#e66465, #9198e5);
/* 从左到右 */
background-image: linear-gradient(to right, red , yellow);
/* 对角 */
background-image: linear-gradient(to bottom right, red, yellow);

/* 透明度 rgb是颜色，a 是是否透明，1不透明，0透明*/

background-image: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1))

文本阴影

/*

h-shadow       必需的。水平阴影的位置。允许负值
v-shadow       必需的。垂直阴影的位置。允许负值
blur                可选。模糊距离
color              可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

*/

text-shadow: 5px 5px 5px #FF0000

文本溢出

  • 显示一行，超出部分显示省略号

{

/* 不让换行 */

white-space: nowrap;

/* 溢出的部分隐藏 */

overflow: hidden;

/* 溢出的部分显示... */

text-overflow: ellipsis;

}

  • 显示指定几行，超出的部分显示省略号

{

/* 溢出的部分隐藏 */

overflow: hidden;

/* 溢出的部分显示... */

text-overflow: ellipsis;

/* 指定显示行数 */

-webkit-line-clamp: 3;

display: -webkit-box;

-webkit-box-orient: vertical;

}

文本换行

/* 长文本换行 */
word-wrap:break-word;
/* 单词拆分换行 */
word-break: break-all;

鼠标移动到图片上放大

img:hover { 
    transform: scale(1.1);        // 放大1.1倍
    transition: 0.5s ease;        // 0.5秒动画
}

// 如果不想超出父元素 overflow: hidden 设置溢出的图片隐藏

设置盒子宽度 width 参数取值：长度、百分比、auto(默认父级的宽度)
设置盒子高度 height 参数取值：长度
设置文本颜色

color: #000

 参数表示：指定字体颜色
设置背景颜色

background-color: #aaa

 参数表示：指定背景颜色
盒子设置边框 border: 5px solid red

参数分别表示：边框宽度、边框的样式、边框的颜色
样式的选择分别有：solid 实线、dotted 点、dashed 虚线 outset 立体
盒子设置填充大小 padding
  • padding:10px 5px 15px 20px;

    • 上填充是 10px
    • 右填充是 5px
    • 下填充是 15px
    • 左填充是 20px
  • padding:10px 5px 15px;
    • 上填充是 10px
    • 右填充和左填充是 5px
    • 下填充是 15px
  • padding:10px 5px;
    • 上填充和下填充是 10px
    • 右填充和左填充是 5px
  • padding:10px;
    • 所有四个填充都是 10px
盒子设置外边距大小 margin 
  • margin:10px 5px 15px 20px;

    • 上边距是 10px
    • 右边距是 5px
    • 下边距是 15px
    • 左边距是 20px
  • margin:10px 5px 15px;
    • 上边距是 10px
    • 右边距和左边距是 5px
    • 下边距是 15px
  • margin:10px 5px;
    • 上边距和下边距是 10px
    • 右边距和左边距是 5px
  • margin:10px;
    • 所有四个边距都是 10px
怪异盒子模型 box-sizing:border-box 标准盒子模型，设置后会增加原有标签的大小，如果不想改变大小，就要指定成怪异盒子模型
设置盒子的排版
方式一：兄弟div之间 float

浮动布局

取值：

left：浮动在左侧
right：浮动在右侧
inherit：继承父级的浮动方式
方式二：兄弟div之间，需要有父级div position

定位布局

父元素取值：

relative：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

子元素取值：

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right"，"bottom"属性进行移动。
方式三：兄弟div之间，需要有父级div display:flex

弹性布局

指定弹性布局后，默认横向从左到右排列

指定为弹性布局后，取值can：cnblogs.com/wywblogs/p/15403479.html
盒子中的内容过多超出盒子外 overflow

取值：

hidden：超出的部分隐藏，不带滚动，

scroll：超出的部分隐藏，滚动，

auto：默认值scroll

html、css 教程相关推荐

  1. css教程之列表属性

    列表属性(相关css教程)   CSS属性: 7.列表属性: 这里的属性用来描述列表(list)的一系列属性. list-style-type属性描述用于列表每一项前使用的符号: 属性名称: 'lis ...

  2. css教程–十步学会用css建站(全)

    css教程–十步学会用css建站(全) 转载于:https://www.cnblogs.com/reommmm/articles/1195548.html

  3. 一篇极好的 CSS 教程

    这是我codeproject上面看到的极好的css教程,今日放上让大家看看,待我明日青岛归来翻译给大家看看. CSS stands for Cascading Style Sheets. This i ...

  4. 43个PSD to XHTML，CSS教程

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

  5. html段落排版,美化网页段落排版的css教程

    美化网页段落排版的css教程 上四篇的内容是把常用的XHTML标签拿出来介绍了一下,不是很详细.不过没关系,重点是要能先知道用他们,以后深入了再去细细研究更为详细的特性以及使用方法就容易多了.上篇已经 ...

  6. Html设置表格撑开,CSS教程:表格不被撑开的解决办法

    CSS教程:表格不被撑开的解决办法 2009-10-21 eNet&Ciweek 今天在做一个用户留言列表的时候,用到了表格.用户名为英文字符时,就会把固定宽度的单元格撑开.之前也有遇到过.解 ...

  7. html 单元格被撑开_CSS教程:表格不被撑开的解决办法—css教程

    今天在做一个用户留言列表的时候,用到了表格.用户名为英文字符时,就会把固定宽度的单元格撑开.之前也有遇到过.解决办法:先用noWrap令文字不换行,再用style=table-layout:fixed ...

  8. spry提示信息设置html,CSS教程:12.4 借助于Spry实现折叠面板

    在基于Spry的基础上实现了Tab板之后,再来制作一个折叠面板的页面,效果如图1所示.图中一共有3个折叠面板,每个折叠面板都有一个标题.单击一个标题,就可以实现面板的折叠隐藏或展开.图1的左图为折叠起 ...

  9. 【CSS 教程系列第 3 篇】CSS 如何添加注释

    这是[CSS 教程系列第 3 篇],如果觉得有用的话,欢迎关注专栏. 语法 /* 这里填写注释内容 */ 说明 CSS 注释是以 "斜杠+星号" 开始,以"星号+斜杠&q ...

  10. 【CSS 教程系列第 12 篇】什么是 CSS 中的伪类选择器

    这是[CSS 教程系列第 12 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有 元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器. ...

最新文章

  1. 病毒入侵的故事—BBC细胞的暗战The Hidden Life of the Cell
  2. opencv_contrib编译失败解决方法
  3. [BZOJ 1879][SDOI 2009]Bill的挑战 题解(状压DP)
  4. linux下提示/usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.14‘ not found 解决办法
  5. 命令模式——HeadFirst设计模式学习笔记
  6. Command ***/bin/ git fetch --tags --progress denied
  7. C++11 多线程相关知识的学习
  8. css中background的使用总结
  9. java 档案管理系统论文_基于JAVA学生档案管理系统论文.doc
  10. 解决iSlider的一些问题(滑动组件)
  11. 跨域：Response to preflight request doesn t pass access control check: No Access-Control-Allow-Origin
  12. Anndroid 使用相机或相册打开图片
  13. ​创业10年的领导口出狂言：80后该退出IT行业！网友怒怼！
  14. 大数据学习之分布式数据库HBase
  15. 集成学习——bagging原理及分析
  16. Arduino DRV8825驱动两相步进电机
  17. 从源码角度浅谈IRP
  18. 愿有岁月可回首，更敬年少一杯酒
  19. Html5学习------canvas绘制径向渐变图形
  20. Javascript 执行上下文(ES3)

热门文章

  1. html下拉菜单插件,简单的jQuery大型下拉菜单插件
  2. jquery省地市三级联动
  3. 北大青鸟ACCP5.0课程体系介绍
  4. 织梦系统(DEDECMS)后台模板修改
  5. LeetCode-面试题 08.09. 括号-回溯（生成指定对数的括号）-括号生成-每一个位置有两种可能，一是‘(‘，另外一个是‘)‘
  6. Java实现 LeetCode 481 神奇字符串
  7. [BUUCTF]PWN16——jarvisoj_level2
  8. Win11系统更新后网络速度变的很慢怎么办？
  9. CSDN排名第一的人--2019
  10. 【课程设计】UWP 开发入门小笔记（1）