您的位置: 首页  >  IT文章  >  CSS：描述样式

CSS：描述样式

分类: IT文章 • 2023-11-06 12:50:03

一、CSS

　　css：Cascading Style Sheet，层叠样式表，用于描述网页样式

　　　　1. 同一个标签可以有多个选择器作用，给他增加样式；

　　　　2. 有继承性，祖先的标签的一些属性，可以继承给后代标签；

　　　　3. 有层叠性，当遇见冲突的时候有着一套严密法律，规定谁生效谁被杠掉。

　　css的维护者是w3c，最新版是css3，但是浏览器没有那么好的兼容

　　css分成两部分：

　　　　1. 选择谁？

　　　　2. 设置什么样式？

二、选择器

　　1. 标签选择器

　　2. id选择器　　"#"

　　3. class选择器　　"."

　　　　给某一类元素，设置相同的类名，然后通过这个类名来选择它们。

　　　　原子类：将一些简单的属性做成一个类，然后元素自行选择

　　4. 后代选择器  .div1 .div3 p{}

　　5. 交集选择器  p.ha{}

　　6. 并集选择器  p,div{}

　　7. 通配符 *{}

　　继承性

　　　　css规定，有一些属性，给某一个元素设置了，它的后代元素同样拥有这个属性了。

　　　　有了继承性，就能够把一些初始的，基本的，普遍的设置，写在body里

　　　　哪些元素具有继承性呢？

　　　　　　color

　　　　　　text-系列，例如 text-decoration:underline;

　　　　　　font-系列，例如 font-size:30px;

　　　　　　line-系列

　　　　特别的，要知道不能继承的属性：background-color、所有盒模型的属性（width、height、border、padding、margin）都是不继承的！

　　层叠性

　　　　处理冲突的能力，就是当多个选择器都选择上了同一个标签，听谁的？

　　　　权重：id > class > 标签

　　　　1. 选择上了

　　　　　　先比权重--再比远近（style出现的顺序）

　　　　2. 没有选择上

　　　　　　先比远近（祖辈标签的距离）--再比权重

　　　　应用场景：先设置共性、再针对设置私有（层叠掉共性）

　　　　!important提升权重：严禁滥用!important提升权重，只能在原子类的情况时有！

三、设置样式

　　颜色表示法

　　　　1. 单词

　　　　　　black、white、red、green、blue、yellow、pink、orange、purple、gold、gray、yellowgreen、greenyellow等等

　　　　2. rgb()　

　　　　　　红色
　　　　　　background-color: rgb(255,0,0);
　　　　　　绿色
　　　　　　background-color: rgb(0,255,0);
　　　　　　蓝色
　　　　　　background-color: rgb(0,0,255);
　　　　　　黑色
　　　　　　background-color: rgb(0,0,0);
　　　　　　白色
　　　　　　background-color: rgb(255,255,255);
　　　　　　灰色
　　　　　　background-color: rgb(111,111,111);

　　　　3. 十六进制

1. 文字样式

　　color

　　font-size：尺寸

　　line-height：行高

　　font-family：字体

　　　　网页中，为了让所有用户都有一致的体验，只能使用宋体、微软雅黑

　　　　font-family:"Arial","Microsoft Yahei","SimSun";

　　font-weight：字体权重

　　　　font-weight:bold; 　　---> font-weight:700;　　加粗

　　　　font-weight:normal;　---> font-weight:400;　　不加粗

　　font-style:样式

　　　　font-style:italic;　　　　倾斜

　　　　font-style:normal;　　　不倾斜

　　text-decoration:字体装饰

　　　　text-decoration:underline;  　　下划线

　　　　text-decoration:none;　　　 　　默认，没有下划线

　　　　text-decoration:line-through;　  删除线

　　

　　font综合

　　font:italic bold 12px/20px "arial","Microsoft Yahei","SimSun";

　

2. 盒子模型

　　盒模型就是width、height、padding、border、margin这几个属性

　　真实占有宽度 = width + 左边padding + 右边padding + 左边border + 右边border

　　padding：上、右、下、左

　　padding-top、padding-right、padding-bottom、padding-left;

padding:10px 20px 30px;
/*等价于*/
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:20px;/*和右边一样*/

　　border：粗细 线型 颜色

　　border:1px solid red;     工作中只许用solid（实线）和dashed（虚线），其他线型都有兼容问题

　　border-width、border-style、border-color;

　　border-top-width、border-top-style、border-top-color;

　　border-bottom:none;　　如果某一个边框我们不想要，那么就写none

　　margin：外边框

　　margin-top、margin-right、margin-bottom、margin-left;

　　注意：相邻的两个margin有塌陷现象，以margin大的为准。

　　居中策略

　　text-align:center;　　　盒子中的文字水平居中

　　margin:0 auto;　　　　盒子本身水平居中

　　line-height:盒子高度;　 但行文本的垂直居中

3. 浮动

　　标准文档流

　　　　从左至右、从上到下、有一个"光标"的概念

　　　　性质：空白折叠现象；高矮不齐，底边对齐；把元素分为"块级元素"和"行内级元素"

　　　　块级元素：div、h、p、ul、li、dl、dt、dd

　　　　　　能够设置宽度、高度（没有设置宽度，默认是父亲的宽度）

　　　　　　不能并排

　　　　行内级元素：span、a、b、u、i、em、strong

　　　　　　不能设置宽度、高度

　　　　　　可以并排

　　　　块级和行内相互转换

　　　　　　display:block;　　把行内-->块  非常有用

　　　　　　display:inline;　　把块-->行内  丝毫无用，工作10年都遇不到

　　我们发现标准文档流是做不出网页的，因为它太迂腐：能够设置宽度的不能并排，能够并排的不能设置宽高

　　所以需要脱离标准流：脱离标准流一共有三种方法：浮动、绝对定位、相对定位

　　浮动：float

　　　　浮动是做并排用的

　　　　浮动元素脱离了文档流，所以没有inline、block之分了

　　　　浮动的儿子不能撑高父亲

　　　　浮动在竖直方向上的margin塌陷现象消失

　　　　浮动字围效果

　　清除浮动

　　　　有高度的盒子能够管住自己内部的浮动元素

　　　　如果盒子没有高度，内部浮动的元素序列就乱套了，第二个序列就会追随第一个序列了。

　　　　解决办法1：给后面的盒子加上clear:both

　　　　　　缺点：box还是没有高度、margin失效

　　　　解决方法2：隔外墙

　　　　　　虽然margin失效，但可以用小技巧来弥补，可以用墙的高度来做间隔

　　　　　　但是盒子依然没有高度

　　　  解决办法3：内墙

　　　　　　现在有了margin、也有了高度了，但是放置的标签太多。这些标签没有语义，看起来不爽。

  　　　解决办法4：overflow:hidden;

　　　　　　工作中常用的

　　　　　　在浮动的父盒子上加 overflow:hidden;

　　　　　　在两个大部分之间隔外墙

<div class="box1">  → 这个盒子没高，就写上overflow:hidden;
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>
<div class="box2">  → 这个盒子没高，就写上overflow:hidden;
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

　　

4. 定位

　　position:relative;　　相对定位

　　position:absolute;　　绝对定位

　　position:fixed;　　　　固定定位

　　子绝父相

　　z-index   只有定位的元素才能写z-index值；从父现象（父亲怂了，儿子再牛逼也没有用）

5. 背景

　　属性

　　background:red url(1.jpg) no-repeat -10px -100px fixed;

　　background-color:red;

　　background-image:url(images/1.jpg);

　　background-repeat:no-repeat/repeat-x/repeat-y;

　　background-attachment:fixed;　　固定

　　background-position:100px 200px;     

　　　　最常见的应用：CSS精灵

　　　　就是把多个小杂碎图片，合成一张图片，然后通过backgroud-position定位只显示其中一部分。

　　　　这样能够显著降低HTTP请求数

　　　　CSS：描述样式

　　应用：

　　　　通栏banner/大背景

　　　　background-position:center top;    ---->background-position:50% 0;

　　　　背景图的应用

　　　　先导符号放到padding里

　　　　<h1>爱前端-专业的前端开发培训</h1> 

.header h1{
    width: 221px;
    height: 68px;
    background:url(images/logo.png);
    /*h1中的文字方便搜索引擎抓取，背景图用于展示*/
    line-height: 400px;
    overflow: hidden;
}

　　　

6. 表格、列表

ul{

    list-style:none;

}

7. 超链接美化

　　伪类：link、visited、hover、active

　　爱恨准则：love hate

　　常见写法：

　　a:link,a:visited{}

　　a:hover{}

　　

　　

/*楔形小三角*/
div{
    width: 0px;
    height: 0px;
    border: 10px solid white;
    border-top-color:blue;
    border-bottom: none;
    transition:all 0.4s ease 0s;
}
div:hover{
    transform:rotate(180deg);
}

相关推荐