html+css学习笔记

最新推荐文章于 2024-09-15 10:24:49 发布

牛爷爷lxl

最新推荐文章于 2024-09-15 10:24:49 发布

阅读量330

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/liuxilei66/article/details/78232252

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css选择器：

 基础选择器、关系选择器、属性选择器、伪类选择器、伪对象选择器。

关系选择器有如下几种：

包含选择器（EF）
子选择器（E>F）
相邻选择器（E+F）
兄弟选择器（E~F）注意的地方，对它后面的元素起作用。

1.包含选择器符（EF）

选择所有被E元素包含的F元素，中间用空格隔开。

ul li{
    color:red;
}
<ul>
    <li>苹果</li>
    <li>橙子</li>
    <li>西瓜</li>
</ul>

2.子选择器符（EF）

选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用大于号表示。

div>a{
    color:red;          //div下的一级子元素a
}
<a href="#">这是子元素</a>
<p><a href="#">这是子孙元素</a></p>

选择第一个子元素，在bootstrap的源码非常多见。

3.相邻选择器符（E+F）

选择紧贴在E元素之后F元素，用加号表示，选择相邻的第一个兄弟元素。

p+span{
    color:red;    //只会选中第一个span
}
<p>这是p元素</p>
<span>这是紧挨着p元素的第一个span</span>
<span>这是第二个span</span>

4.兄弟选择器符（E~F）

选择E元素之后的所有兄弟元素F，作用于多个元素，用~号隔开。

p+span{
    color:red;  //和p之后平级的span元素都被选中了，有几个选几个。
}
<span>这span在p元素之前不会被选中。</span>
<p>这是p元素</p>
<span>~~~~~~~~</span>
<span>~~~~~~~~</span>
<span>~~~~~~~~</span>

css属性选择器

通过html的属性来选择元素，<p class="p1"></p>class即是属性，p1是class的属性值。
写法：元素[属性名="属性值"]，等号不固定，可换其他符号。

E[att] 选择具有att属性的E元素
E[att=”val”] 选择具有att属性且属性值等于val的E元素
E[att~=”val”] 选择有att属性的元素，且属性值列表中有一个符号val E元素。
E[att^=”val”] 选择E元素中有att属性，且以”val”开头的E元素。
E[att$=”val”] 选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*=”val”] 选择具有att属性且属性值包含val的字符串的E元素。

伪类选择器

伪类通过冒号来定义，它定义了元素的状态，如点击按下，点击完等等，我们之前都是直接操作元素的样式，使元素看上去更"动态"。

E:link 设置超链接a在未被访问前的样式（特指a标签）
E:visited 设置超链接a已被访问过的样式（特指a标签）
E:hover 设置鼠标悬浮在元素上时的样式，不限于a标签
E:active 设置元素在鼠标按下时的样式，不限于a标签
E:not(s) 匹配不含有s选择器的元素
E:first-child 父元素的第一个子元素
E:last-child
only-child
empty
checked
nth-child(n)

伪对象选择器

伪对象也叫伪元素，在过去，伪类和伪元素都被写成前面只加一个冒号，实际上应该:weilei  ::weiyuansu，而现在我们为了兼容旧的书写方式，用一个冒号引导伪类也是能被解析的。

伪类一般反映无法在css中轻松或者可靠检测到的某个元素的状态或属性；

伪元素表示DOM外部的某种文档结构

伪类更多是定义元素的状态，而伪元素是改变文档结构，在结构外另加一个没有实际存在的元素（伪元素）

常用伪元素（html之外通过css模拟出一个html结构）
  1.E:before/E::before
  2.E:after/E::after

position定位

position属性是指本体相对于上级的定位，position定位又分绝对定位和相对定位。它的默认值是static，意味着元素没有定位，出现在文档流中应该出现的位置。如果用position来布局页面，父级元素的position属性必须为relative或absolute，行元素加了position:absolute后可设置宽和高（加了float和fixed以后也可以设置宽和高）

常见属性值：

static：无特殊定位，对象遵循正常文档流。
relative：对象遵循正常文档流。
absolute：对象脱离正常文档流，使用top、right、bottom、left等属性进行绝对定位。
fixed：对象脱离正常文档流。使用top、right、bottom、left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。IE6及以下不支持此参数值。
```
static、relative正常文档流      absolute、fixed脱离正常文档流
```

position绝对定位。

设置了绝对定位的元素，他默认参照浏览器的左上角，配合top、right、bottom、left四个属性进行定位。通常我们设置两个值就可以定位，如果四个都写，以左上角（left、top）为准。

清除浮动的三个方法：

1.使用伪元素清除浮动

.box::after{
    content:" ";
    clear:both;
    display:block;
}
.left,.right{
    width:100px;
    height:100px;
    background:#388bff;
    float:left;
}
<div class="box">  
    <div class="left"></div>
    <div class="right"></div>
</div>

2.使用overflow：hidden清除浮动

.box{
    overflow:hidden;    //overflow:auto 也是可以的
}
.left,.right{
    width:100px;
    height:100px;
    background:#388bff;
    float:left;
}
<div class="box">  
    <div class="left"></div>
    <div class="right"></div>
</div>

3.使用空div

.clear{
    clear:both;
}
<div class="clear"></div>

能被继承的常用属性：

color、cursor、font-family、font-size、font-weight、font、letter-spacing、line-height、list-style、text-align、text-indent

浏览器内核以及其前缀

Gecko内核前缀为-moz- 火狐浏览器
Webkit内核前缀为-webkit- chrome浏览器、safari浏览器
Trident内核前缀为-ms- 也称IE内核
Presto内核前缀为-o- 只有opera采用，但现在opera使用了有webkit衍生在blink内核

box-shadow：水平阴影的位置垂直阴影的位置模糊距离颜色

box-shadow:10px 20px 5px blue;

text-shadow(文字阴影)

  格式同上

css3字体

引用

@font-face{
    font-family:myFirstFont;  //你自定义的字体名
    src:url("res/lxksf.ttf");
}

过渡transition

书写格式
   transition:属性名 时间 速度曲线 何时开始;
   最少要包含过渡时间。

转换transform

分为2D和3D
2D
  transform:rotate(0 deg);
3D
  transform:rotateX();
  transform:rotateY();
  transform:rotate3d(x,y,z);   //z轴一般不用写

动画

@keyframes动画名
两种方式1.form to   2.百分比
用@keyframes定义好后通过animation进行引用
animation的可选值可指定这几个值:动画名、动画时长、效果、开始时间

动画示例：

img{
    width:100px;
    height:100px;
    border-radius:50%;
}
@keyframes CDturn{
    from{
        transform:rotate(0 deg);
    }
    to{
        transform:rotate(360 deg);
    }
}
img:hover{
    animation:3s linear infinite CDturn
}
<img src="img/cd.png" alt=" " />

特殊图形

三角形
   通过border来定义，宽和高要设置为0，另外两面的颜色设置为透明
梯形
   通过border来定义，和三角形不同的是要设置宽度。
圆形
   宽、高、border-radius：50%;

多列

column-count 分几列
column-gap 列间距
column-rule 列分割线的样式
（加前缀:eg；-webkit-）

多行文本框

<textarea name=" " id=" " cols="30" row="10"></textarea>

补充：resize=none;（不可调大小）
模拟出可调大小的：

resize:both;
overflow:hidden;
width:_px;
height:_px;
border:_ _ _;

Box-sizing

box-sizing属性允许你以"W3C的盒模型"或"IE盒模型"来定义元素，以适应区域。换句话说，当前元素使用哪种盒模型，可以由box-sizing属性指定。

它有两个值

content-box（标准）：padding和border不被包含在width和height内，元素的实际大小为宽高+border+padding，此为标准模型下的盒模型。
border-box（怪异）：padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多宽。此属性为怪异模式下的盒模型。