CSS

用户9603238

发布于 2022-03-31 09:16:50

1K00

代码可运行

文章被收录于专栏：xsa的blogxsa的blog

运行总次数：0

代码可运行

CSS

CSS背景样式

background-repeat 平铺方式

默认：会水平垂直都铺满背景图

repeat-x x轴平铺 repeat-y y轴平铺

repeat ( x , y 都进行平铺，默认值 )

no-repeat 都不平铺 background-position : 背景位置 x y : number(px、%) | 单词 x : left、center、right y : top、center、bottom background-attachment : 背景图随滚动条移动的方式 scroll : 默认值 ( 背景位置是按照当前元素进行偏移的 ) fixed ( 背景位置是按照浏览器进行偏移的 )

CSS边框样式

border-style : 边框样式 < solid : 实线, dashed : 虚线 , dotted : 点线>

border-width : 边框大小

边框也可以针对某一天边进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom

颜色：透明颜色 transparent

CSS段落样式

text-decoration：文本装饰下划线 : underline 删除线 :line-through 上划线 : overline 不添加任何装饰 : none 注：添加多个文本修饰：line-through underline overline

text-transform：文本大小写（针对英文段落）小写：lowercase 大写：uppercase 只针对首字母大写：capitalize

text-indent : 文本缩进首行缩进 em单位：相对单位，1em永远都是跟字体大小相同

text-align : 文本对齐方式对齐方式 : left 、right、center、justify（两端点对齐）

line-height : 定义行高

什么是行高，一行文字的高度，上边距和下边距的等价关系。默认行高：不是固定值，而是变化的。根据当前字体的大小再不断的变化。

取值：1. number( px ) | scale ( 比例值 , 跟文字大小成比例的 )

letter-spacing : 字之间的间距 word-spacing : 词之间的间距 ( 针对英文段落的 )

英文和数字不自动折行的问题： 1. word-break : break-all; (非常强烈的折行) 2. word-wrap : break-word;(不是那么强烈的折行，会产生一些空白区域)

CSS复合样式

background

background:(backgroud-color)   (background-image)  (background-repeat)/平铺方式/

例：backgournd : gray url(xxx/xx.jpg) no-repeat;

border

border: border-width border-style border-color;

例：border: 1px solid #D3f402;

边框颜色可省略，默认黑色。border:3px dashed;

font

顺序不能反！！！

font:font-style font-weight font-family font-size line-height

margin

margin:margin-top marigin-right margin-bottom margin-left

padding同理。

color

颜色的三种写法

color: DarkGoldenRod;
color:rgb(184,134,11)
color:#B8860B;

CSS选择器

id选择器

   #elem{}      id=”elem”

注：

ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
命名的规范:由字母、下划线、中划线、字母（并且第一个不能是数字）

class选择器

    .box{}      class=”elem”

注：

class选择器是可以复用的。

可以添加多个class样式。

<div class="content box"></div>

多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。

标签+类的写法

标签(元素)选择器

    div{}          
    p{}

应用：

去掉某些标签的默认样式时
复杂的选择器中，如层次选择器

群组选择器(分组选择器)

可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。

<style>
div , #text , .title{ background:red;}
<style>

通配选择器

*{  } ->  div,ul,li,p,h1,h2….{}

注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。使用的场景：去除默认样式

 *{margin:0; padding:0;}

层次选择器

后代 M N { }

#list li{border:1px solid red;}

父子 M > N { }

#list > li{border:1px solid red;}

兄弟 M ~ N { } 当前M下面的所有兄弟N标签

div ~ h2{backgroun:red;}
/* h2标签在div标签的下面 */

相邻 M + N { } 当前M下面相邻的N标签

div + h2{backgroun:red;}

属性选择器

div[class]{background:red;}
div[class=box]{background:red;}
div[class=*seaech]{background:red;}
div[class=^seaech]{background:red;}
div[class=$seaech]{background:red;}
div[class][id]{background:red;}

<div>aaaaa</div>
<div class="box" id="elem">bbbb</div>
<div class="search">cccccc</div>
<div class="search-button">ddddd</div>
<div class="button-search">ddddd</div>

伪类选择器

M:伪类{} :link 访问前的样式 ( 只能添加给a标签 ) :visited 访问后的样式 ( 只能添加给a标签 ) :hover 鼠标移入时的样式 (可以添加给所有的标签) :active 鼠标按下时的样式 (可以添加给所有的标签)

注：

一般的网站都只设置  
    a{}   ( link visited active )    a:hover{}

:after、:before

通过伪类的方式给元素添加一段文本内容，使用content属性

div:after{content:"world";color:red;}

:checked、:disabled 、:focus 都是针对表单元素的

:checked{width:100px;height:100px;}
:disabled{width:100px;height:100px;}
:focus{background：red;}

<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="text">

结构性伪类选择器

nth-of-type() nth-child() 角标是从1开始的，1表示第一项，2表示第二项 | n值表示从0到无穷大 first-of-type last-of-type only-of-type
nth-of-type()和nth-child()之间的区别 type : 类型 child : 孩子

li:nth-of-type(2n+1){background:red;}
li:nth-of-type(2n){background:blue;}
/*隔行换色*/

CSS继承

文字相关的样式可以被继承布局相关的样式不能被继承 ( 默认是不能继承的，但是可以设置继承属性 inherit 值 )

div{width:100px ;height:100px;border:1px solid red;color:blue;font:size:21px;}

<div>
<p>hello girl</p>
<div>
<!-- hello girl的字体颜色和字体大小改变，布局没有被继承。-->

p{border:inherit;}/*此时border属性被继承。*/

CSS优先级

当设置相同样式时，后面的优先级较高。

div{color:red;}
div{color:blue;}
/* 优先展示蓝色字体*/

内部样式和外部样式优先级相同，根据引入顺序决定优先级

单一样式优先级

!important不能针对继承的属性进行优先级的提升
标签+类>单类如：div.box{}>.box{}
群组选择器与单一选择器的优先级相同，靠后写的优先级高。如：div,p{}=div{}=p{}

标签分类

按类型 block : div、p、ul、li、h1 …

独占一行
支持所有样式
不写宽的时候，跟父元素的宽相同。
所占区域是一个矩形。

inline : span 、a、em、strong、img …

贴在一起的
1. 有些样式不支持，例如：width、height、margin、padding
2. 不写宽的时候，宽度由内容决定
3. 所占的区域不一定是矩形
4. 内联标签之间会有空隙，原因：换行产生的

inline-block : input、select …

贴在一起，但是支持宽高

注：布局一般用块标签，修饰文本一般用内联标签

按内容 Flow：流内容 Metadata：元数据 Sectioning：分区 Heading：标题 Phrasing：措辞 Embedded：嵌入的 Interactive：互动的（详情：https://www.w3.org/TR/html5/dom.html）按显示替换元素 :浏览器根据元素的标签和属性，来决定元素的具体显示内容。 img、input … 非替换元素 : 将内容直接告诉浏览器，将其显示出来。 div、h1、p …

CSS重置

*{ margin:0; padding:0;}
        优点：不用考虑哪些标签有默认的margin和padding
        缺点：稍微的影响性能
        body,p,h1,ul{ margin:0; padding:0;}
ul{ list-style : none;}    
a{ text-decoration: none; color:#999;}
img{ dispaly:block}

问题的现象：图片跟容器底部有一些空隙。 内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。 vertical-align: baseline; 基线对齐方式，默认值 img{ vertical-align:bottom;} 解决方式是推荐的

写具体页面的时候或一个布局效果的时候： 1. 写结构 2. css重置样式 3. 写具体样式

清除浮动元素

浮动就是儿子飘了（float）,老子管不住儿子了（儿子高度为空）清除浮动三种方法 1.给儿子介绍一个对象，管住儿子不要乱跑，对象添加 clear:both 2.把儿子锁在家里，bfc ，就是给老爷子设置 overflow:hidden / overflow:auto 或者老爷子出去逮住小崽子，一起浮动老爷子设置 float 3.使用伪元素，就是给儿子介绍一个网恋对象（实际不存在，父亲装的）父亲添加类class 添加伪元素：after content:;display:block ；clear:both上面三种，我最经常犯的错误是给错误的对象加错东西，所以再总结一下第一种：发媳妇给儿子后面的元素加 clear :both 第二种：给门上锁给父亲加 overflow 或者 float 第三种：父亲假扮网恋给父亲加 :after 然后 clear:both

我经常是把css 错加给儿子然后怎么试都不成功，子不教，父之过，应该定准浮动的父亲做文章，就不会有问题了。

<来自网友的总结，感觉很nice，摘录了下来。>

CSS定位

position : relative：如果没有定位偏移量，对元素本身没有任何影响,不使元素脱离文档流，不影响其他元素布局。 left、top、right、bottom是相对于当前元素自身进行偏移的
absolute：使元素完全脱离文档流（类似于浮动）使内联元素支持宽高（让内联具备块特性）使块元素默认宽根据内容决定（让块具备内联的特性）。如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
fixed：使元素完全脱离文档流使内联元素支持宽高（让内联具备块特性）使块元素默认宽根据内容决定（让块具备内联的特性）相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

BFC规范

BFC即Block Formatting Contexts(块级格式化上下文)。具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通元素所没有的一些特性。

触发BFC规范的元素，可以形成一个独立的容器。不受到外界的影响，从而解决一些布局问题。

1.浮动元素：float除none以外的值

2.绝对定位元素：position（absolute、fixed）

3.display 为 inline-block、table-cells、flex

4.overflow除了visible以外的值（hidden、auto、scroll）

BFC特性和应用

解决margin叠加问题

.div1{ width:100px; height:100px; background:red; margin-bottom: 30px;}
.div2{ width:100px; height:100px; background:blue; margin-top: 30px;}
.box{ display: flex;}

<div class="box">
        <div class="div1"></div>
    </div>
    <div class="box">
        <div class="div2"></div>
    </div>

解决margin传递问题

.div1{ width:200px; height:200px; background:red; }
	.div2{ width:100px; height:100px; background:blue; margin-top:50px;}
	.div3{ width:200px; height:200px; background:pink; overflow: hidden;}
	.div4{ width:100px; height:100px; background:green; margin-top:50px;}

<div class="div1">
		    <div class="div2"></div>
		</div>
		<div class="div3">
			<div class="div4">

解决浮动问题

解决覆盖问题

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-10-162，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

暂无评论

CSS

CSS

CSS