HTML、CSS基础知识

嗯嗯__
141 阅读7分钟

文章目录


标签： HTML标签、属性、属性值对大小写不敏感 → 标准建议用小写

注释语法：****

描标记：跳转到的地方设id， 另一个元素 href值为 跳转元素的id值

a标签的属性 href即可做描标记跳转，也可以做新的链接地址
target：_blank在新的标签页打开

<img id="image">
<a href = "#image" > 跳转到id=image的图片</a>
<a href = "https://www.baidu.com" target = "_blank">百度一下</a>

head标签

base标签： 设立整个页面默认的href链接地址(补全)，以及其他属性的默认值

<head>
    <base href="https://www.baidu.com//img/" target= "_blank>
</head>

选择器

1.简单选择器

显示优先级：id选择器 > class选择器 > 标签选择器
样式优先级变最高：属性值!important

<!--正常显示p的背景色为绿色，添加了"!important"后显示背景色为蓝色-->
<style>
    #one { background: green; }
    .two { background: blue!important; }
</style>

<p id="one" class="two">你好</p>

 
1.类选择器： 影响同一个class名的元素，js中能获取一群同class名元素 → .class名
2.id选择器： css样式中影响同一个id名的元素，但是js中只能影响获取一个元素 → #id名
3.标签选择器： 整个body所有同一个标签名都统一修改

<style>
    <!--id选择器-->
    #one {              
        background: green;
    }
    <!--类选择器-->
    .two {      
        background: blue;
    }
    <!--标签选择器-->
    div {           
        width: 50px;
        height: 50px;
    }
</style>

<div id="one"></div>
<div class="two"></div>

 

4.后代选择器： 在前一个标签、id名、class名的范围内 的 选择器儿子、孙子等级元素进行修改
5.子元素选择器： 当前父元素下的直系亲儿子元素 → 标签1>标签2
6.兄弟选择器： 只能选择一个元素(选择一个亲兄弟)，紧跟标签1之后的同级标签2 → 标签1+标签2
7.通用兄弟选择器：选择该标签的同级元素，即多个亲兄弟

<style>
<!--选中的是2、3标签，即id="one"的范围下所有div标签-->
#one div {  }

<!-- 选中的是①范围下的 亲儿子 级别的标签 即②③⑤div-->
#one>div {}

<!-- 选中的是只有同级相邻的③元素 -->
#one_inner+div {}

<!-- 选中的是同级的③⑤亲兄弟元素 -->
#one_inner~div {}
<style>

<div id="one">  ①
    <div id="one_inner">   ②
       <div></div>   ④
    </div>  
    <div></div>  ③
    <div></div>  ⑤
</div>

 

8.交集选择器： 两个标签之间取交集的元素 → **标签1标签2 **
9.并集选择器： 同时更改这些标签 → 标签1,标签2
10. 通配符选择器： 选中页面中的所有标签 → *星号表示

通配符选择器：设置当前界面上所有的元素样式，建议实际项目少使用，性能差

11.无后代选择器： 选中没有儿子的元素，包括没有文本节点这个儿子的元素 → 标签：empty
12.通用选择器： 元素1之后的所有元素2，且元素1和元素2是亲兄弟 → 元素1~元素2

<!--页面的所有标签都消除内边距、外边距 -->
* {
    padding: 0px;
    margin: 0px;
}
<!-- 所有div标签 ∩ id="one"的标签   即 id=one的标签 -->
div#one {}

<!-- id=one,two的标签同时修改-->
#one,#two{}

<!--选中的是id="thee"的div标签，因为它没有儿子-->
div : empty {} 


<div id="one">
    <div id="two"></div>
    <div id="three"></div>
</div>

 

2.属性选择器

1.标签[ 属性 ]、标签[ 属性=值 ]： 选择含有属性、等于值得属性的标签
2.标签[ 属性^=值 ]： 选择以”值“开头的属性的标签
3.标签[ 属性$=值 ]： 选择以”值“结尾的属性的标签
4.标签[ 属性*=值 ]： 选择属性值含有“值”的标签
5.[属性]、[属性=值]： 选择设置了该属性，以及属性值为”值“的元素

3.序选择器-odd奇数、even偶数

1. 标签:first-child： 每个p标签的父元素的 第一个出现的亲儿子 如果第一个不是就不会选中
2. 标签:last-child： 每个p标签的父元素的 最后一个出现的 亲儿子 如果左后一个不是就
不会选中
3. 标签:nth-child(n)： 标签的父元素 的 第n个亲儿子，如果是该标签则选中，不是则不被选中
4. 标签:nth-last-child(n)： 标签的父元素从最后一个亲儿子开始数第n个亲儿子，如果是该标签则选中，不是则不选中
5. 标签:only-child： 选中其父亲只有一个亲儿子的 标签

<style>
    <!--选中①③元素-->
    a:first-child {}  = a.nth-child(1)
    <!--选中的是body里面的 最后一个出现的儿子a标签 选中③-->
    a:last-child{}  = a.nth-last-child(1)
    <!-- 选中③-->
    a:only-child {}
</style>

<body>
    <a>你好</a> ①
    <a>大家好</a> ②
    <div>
        <a></a> ③
    </div>
</body>

 
6. a:first-of-type： 选中a标签的父元素 下的a类标签第一个
7. a:last-of-type： 选中a标签的父元素 下的最后一个a标签
8. a:nth-of-type(n)： 选中a标签的父元素下的 第n个a标签
9. a:last-of-type(n)： 选中a标签的父元素下 从最后个a标签开始数 第n个a标签的父元素的亲儿子
10. a:only-of-type： 选中a的父元素中 a类型的标签只能有一个

<!-- 选中的是①③元素-->
a:first-of-type{}  = a:nth-of-type(1)
<!-- 选中的是②④元素-->
a:last-of-type{}  =  a:nth-last-type(1)
<!--一个都没有选中，因为同级a标签类型都是都两个-->
a:only-of-type{}

<div>
    <p></p>
    <a></a> ①
    <a></a>  ②
    <p></p> 
</div>
 <div>
    <p></p>
    <a></a>  ③
    <a></a>  ④
    <p></p>
</div>

 

4.伪元素选择器

元素1: :atfer/before ：在元素1里面的最后/最前添加内容

兼容IE8 → 元素1 : after/before


    <!--
    <span>
        ::after
        你好世界
    </span>
    真正的结构-->
    
<style>
    span:after { 
        content="span结构 内后";
    }
    div::before {
        content = "div结构内 前
</style>

<span>你好，世界</span>
<div>小咩咩</div>

 

5.伪类选择器(元素事件选择器)

这四个选择器同时出现时，需严格遵守顺序（link、visited、focus、hover、active）→ 即（love hate爱恨原则）

  1. 只能用于标签：

    • ：link(没有被访问时)、：visited(已被访问)、：active(鼠标点击那一刻时)
    • ：target(用于锚定位，选择到链接的元素，如果跳转到其他元素，则刚到的元素样式也消失，样式转到新跳转的那个元素上)

  2. 注意：只能在当前的范围下进行修改样式

<!--只要点击①链接，则"one"div则变红，点击②链接，“one"不变红，"two"div变红-->
<style>
    .blo { width:200px;height:200px; border:1px solid black; }
    :target { background : red; }   
</style>


<a href="#one">①点我，改变锚点的样式</a>
<a href="#two">②点我，改变锚点的样式</a>
<div id="one" class="blo"></div>
<div id="two" class="blo"></div>

 
2. 鼠标悬浮在元素上时 ：hover

<style>
    ul li { display: none; }
    ul:hover div li { display: block; }
    ul:hover ul div li { display: block; }   <!--错误，hover已经在ul范围下，无须再重写ul-->
</style>

<ul>
    <div>
        <li></li>
        <li><li>
    </div>
</ul>

元素排列

1.标准流

行内元素水平排版、块级元素垂直排版
内容可撑父元素的高度、宽度继承父元素

  1. 行内元素block： 不可设置宽高、排列在同一行、宽度不够则换行

    • 注意：margin垂直方向不起作用、padding有效、多个相同行内元素，超过宽度则元素换行
    • 常用标签： 、

  2. 块级元素block： 独占一行，可设置宽高

    • 常用标签： h1、div、ul、ol、li

  3. 行内块： 排列同一行、可设置宽高、元素排列有空隙

    • 常用标签：
2.浮动float

float：left/right/none
clear：left/rigth/none → 清除浮动

  • 特点：

    1. 一旦浮动，元素的宽度由内容决定，而不是继承父元素宽度( 像行内元素一样 ) → 包裹性  
    2. 父元素是标准流，而子元素非标准流(浮动、定位) → 则元素垂直方向不会被撑开
    3. 停靠现象：元素的排列像行内元素，行内元素超出父元素长度，则换行显示
<style>
.outer { width: 200px; heigth: 200px; border: 1px solid black; }
.outer div { width: 120px; heigth: 80px; background: red; float: left; }
div:last-child { background: green; }
</style>

<div class="outer>
    <div class="inner">1</div>
    <div class="inner">2</div>
</div>

效果图
[外链图片转存失败(img-kMh0mloG-1565841169886)(en-resource://database/1490:1)]

清除浮动(高度塌陷) - ( 解决：子元素浮动而父元素高度塌陷 )
  • 方法1：父元素同样也设置为浮动或者改变显示方式 → 让其跟子元素也脱离文档流，同属显示层级 （float:left 或者 display: table）
  • 方法2：父元素overflow: hidden/auto → BFC(块级格式化上下文)认为如果要使overflow有效果，也必须知道父元素的高度，故会把浮动后的高度设为父元素固定的高度 → 浮动后页面显示高多少就显示多少父级

也可解决父子元素设置margin时 垂直塌陷的 现象

  • 方法3：内墙法 → 在父元素里面添加新块
    1. 添加div、br标签，并且设置clear:"both"
    2. 利用伪元素进行添加元素、并且设置 clear:“both”、display:"block"
  • 方法4：外墙法 → 只是解决浮动元素造成文档流元素占据浮动元素位置导致重叠的问题

两个有浮动元素的方块，想要隔开，可在两者之间加入一个有height的清除浮动div

<style>
    p { float: left;  background: red;}   
</style>

<div id="one">
    <p>sdf</p>
    <p>eyteryt</p>
</div>
<div style="clear:both; heigth: 20px;"></div>
<div id="two">
    <p>sdf</p>
    <p>eyteryt</p>
</div>

效果图
[外链图片转存失败(img-9B9aoodZ-1565841169894)(en-resource://database/1492:1)]

3.定位(position) → 子绝父相

定位使用top、right、bottom、left 四个样式属性进行调整移动

  • 相对定位relative： → 文档流

    1. 相对以前的位置进行移动（以前的位置依然在文档流）
    2. margin是给旧块使用，然后作用于新块
    3. 应用：企业对于对元素进行微调、配合绝对定位使用

  • 绝对定位absolute： → 脱离文档流

    1. 祖先元素是定位流，则将以该元素来定位（无定位流，则以浏览器窗口左顶点为参考点）
    2. 祖先元素即时有padding，也会以padding扩大的范围为参考点
    3. 水平居中样式设置：left：50% 、 margin-left：-width/2

  • 固定定位fixed： → 脱离文档流

    1. 参考点：可见浏览器窗口的左顶点
    2. 应用：做广告、导航图

  • 静态定位static： 所有标签的默认定位形式

  • z-index: 整形n → 专门用于处理定位流元素覆盖优先级

    1. 该属性有效，必须是定位流元素
    2. 定位流元素 覆盖 标准流元素
    3. z-index越大，覆盖优先级越高
    4. 相同z-index值的元素： 后面编写z-index 覆盖 前面编写

CSS层叠样式表(Cascading Style Sheets)

1. 只有 color(文字颜色)、font(字体)、text(文本)、line(行) 开头的属性才可继承
2. 标签不能继承 文字颜色、下划线
3. 标签 不能继承 文字大小

1.盒子尺寸box-sizing - 盒子的组成

  • content-box(内容盒)：

    1. 内容宽： width
    2. 块(盒子)显示的宽度： width + padding + border
    3. 空间宽： 2 + border

  • border-box(边框盒)：

    1. width：已经设置好整个盒子的实际宽度 → width = 内容 + padding(内填充) + border(边框) → 即上述padding、border都是基于固定width来调整显示的
2.背景
  • background： color(颜色)、url(图片地址)、repeat(平铺方式)、attachment(关联方式)、position(定位)
3.样式值initial - 初始值

显示自身拥有的默认属性值，不受继承影响

<head>
    <style>
        body { color: yellow; }
        h2 { color: initial; }
    </style>
<head>


<body>
    <h1>h1你们好</h1>
    <h2>h2非常地好</h2>
<body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XSKtd1ve-1570524043563)(en-resource://database/4629:1)]

avatar
文章
阅读
粉丝