CSS的其他

E___V___E

已于 2024-02-18 18:12:41 修改

阅读量338

点赞数 7

文章标签： css 前端

于 2024-02-18 17:26:55 首次发布

本文链接：https://blog.csdn.net/E___V___E/article/details/136143564

版权

css初始化

文件-首选项-设置-format on paste打钩就行，设置后再粘贴！

*{margin:0;padding:0}em,i{font-style:normal}li{list-style:none}img{border:0;vertical-align:middle}button{cursor:pointer}a{color:#666;text-decoration:none}a:hover{color:#c81623}button,input{font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif}

/* 清零所有标签的内外边距 */
* {
    margin: 0;
    padding: 0;
	/* CSS3盒子模型 */
	/* 可以不用考虑padding和border是否会撑大盒子的情况了*/
    box-sizing: border-box;
}

/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}

/* 去掉li 的小圆点 */
li {
    list-style: none
}
/* 插入图片的设置 */
img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 手动去掉默认的灰色边框 */
    border: 0;
    /* 手动去掉input输入时的蓝色/加粗边框 */
    outline: none;
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}

/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

border0是兼容低版本浏览器

html5新特性

语义化标签

header，nav{
    height:120px;
    width:800px;
    background-color:pink;
    border-radius:15px;
    margin:15px auto;
}

<header>头部标签</header>
<nav>导航栏标签</nav>
<article>内容</article>
<section>定义文档某区域</section>
<aside>侧边栏</aside>
<footer>尾部</footer>

多媒体标签

<video>尽量使用MP4格式

autio支持

input

<form action="">
    <ul>
        <li><input type=”email” /></li>         
        <li><input type=”url” /></li>
        <li><input type=”date” /></li> 
        <li><input type=”time” /></li> 
        <li><input type=”number” /></li> : 
        <li><input type=”tel” /></li> 
        <li><input type=”search” /></li> 
        <li><input type=”color” /></li>


        <input type=”submit” va1ue="提交"></1i>
</ul>
</form>

表单

CSS中，用input::placeholder{color;skyblue;}可以实现粉色默认值

css3新特性

新增选择器

属性选择器

根据元素的特定属性来选择元素，这样就不用class和id

<style>
input[value]{
    color:blue;
}/*必须是input但是value的属性*/
input[type=text]{
    color:pink;
}/*只选择text的文本框的input选取出来*/
div[class^=icon]{
    color:pink;
}
section[class$=date]{
    color:pink;
}
div.icon1{
    color:pink;
}
</style>
.........
.............
................
＜！——1．利用属性选择器就可以不用借助于类或者id选择器——＞
<input type="text" value="">
<input type="text>
＜！——2．属性选择器还可以选择属性=值的某些元素——＞
<input type="text" name="" id="">
<input type="password" name="" id="">
＜！——3．属性选择器可以选择属性值开头的某些元素——＞
<div class"icon1">小图标1</div>
<div class"icon2">小图标2</div>
<div class"icon3">小图标3</div>
<div class"icon4">小图标4</div>
<div>打酱油的</div>
＜！——4．属性选择器可以选择属性值结尾的某些元素——＞
<section class=＂icon1-data＂>我是安其拉</section>
<section class=＂icon2-data＂>我是哥斯拉</section> 
<section class=＂icon3-ico＂>哪我是谁</section>

结构伪类选择器

对于第三个，even偶数odd奇数

伪元素选择器

利用CSS创建新标签无需HTML

::before在元素前面插入内容

::after在元素前面插入内容

before 和 after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法：element：：before｛｝
before和 after 必须有content属性
before 在父元素内容的前面创建元素，after在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为1

<style>
div::after{
    display:inline-block;
    width:50px;
    height:100px;
    content:'wo';
}
div::before{
    content:'pig';
}

</style>
<body>
<div>
    shi
</div>
</body>

LOADING.......