CSS基础应用

最新推荐文章于 2024-10-30 10:15:35 发布

彬小二

最新推荐文章于 2024-10-30 10:15:35 发布

阅读量187

点赞数

分类专栏：前端文章标签： Css 基础应用

本文链接：https://blog.csdn.net/qq_39884947/article/details/90720004

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

.id #class

css四种引入方式

标签中直接使用

<p style="color: red;background-color: aquamarine">hello</p> style="name:value;name2:value"

在head定义style标签，对变迁类型定义样式

<head><style>
        div{
            color: antiquewhite;
            background-color: teal;
}</style></head>

链接式创建好一个XX.css文件并在html的head标签内导入即可(其中css文件直接写css的语句即可)

<link type="text/css" rel=stylesheet href="example.css" >

导入式

<style type="text/css">
          @import"mystyle.css"; 此处要注意.css文件的路径
</style>

Css选择器寻找指定作用对象

组合选择器

E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 :div,p { color:#f00; }

E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝

E > F 子元素选择器，匹配所有E元素的子元素F :div > p { color:#f00; }

E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F :div + p { color:#f00; }

E ~ F 普通兄弟选择器（以破折号分隔） :.div1 ~ p{font-size: 30px; }

属性选择器

E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
比如“[cheacked]”。以下同。） p[title] { color:#f00; }

E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }

E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
td[class~=”name”] { color:#f00; }

E[attr^=val] 匹配属性值以指定值开头的每个元素
div[class^=“test”]{background:#ffff00;}

E[attr $= v a l] 匹配属性值以指定值结尾的每个元素 d i v [c l a s s$ =“test”]{background:#ffff00;}

E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*=“test”]{background:#ffff00;}

标签嵌套

块级单独占一行，内联之间可以共排显示

块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其他内联元素
块级元素不能放在p里面
有几个块级元素只能包含内联元素，不能包含块级元素h1234567，p,df
li内可以包含div
块级元素与块级元素并列，内联元素与内联元素并列
块级转换成内联,内联转换成块级

display:inline块-内， display:block内-块
块-内还有另外一个样式有同样的效果，就是inline-block
其可以让标签行为内联元素，另外还可以保持一些块元素的特点，比如可以设置应用上width, height等。

伪类：专用于控制链接的显示效果

a:link（没有接触过的链接）,用于定义了链接的常规状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

伪类选择器 : 伪类指的是标签的不同状态:

a ==> 点过状态没有点过的状态鼠标悬浮状态激活状态

a:link {color: #FF0000} /* 未访问的链接 /

a:visited {color: #00FF00} / 已访问的链接 /

a:hover {color: #FF00FF} / 鼠标移动到链接上 /

a:active {color: #0000FF} / 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

一些普通的CSS属性操作

color: red;颜色
font-size: 45px;大小
font-family: "DejaVu Math TeX Gyre";字体类型
font-weight: 900;字体粗细
height: 600px;高度
background-color: pink;背景颜色
background-image: url("tex.jpg");背景以图片
background-repeat: no-repeat;不会铺满只会铺一张
background-size: 400px 300px;设置照片大小
text-align: center;文本居中
line-height: 100px;文本宽度 如果值==height的值 就可以保证水平居中
letter-spacing: 5px;字母间的间隙
word-spacing: 10px;单词间的间隙
text-transform: capitalize;单词的第一个字母大写
display:none 隐藏标签
Left、right、top、bottom后跟数字+html单位。->必须定义position属性值为absolute或者relative此取值方可生效

- 外边距和内边距

padding:内容与边框之间的距离（标签内部内容与盒子的间距）

margin 元素与元素之间的距离（两个标签之间的距离）；控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的

注意整个html还有一个body框

在进行位置定位时最好先将默认浏览器的margin和padding都初始化掉

* {margin: 0;
 padding: 0;  }

margin

margin:10px 20px 20px 10px；

        上边距为10px
        右边距为20px
        下边距为20px
        左边距为10px
margin:10px 20px;

        上下边距为10px
        左右边距为20px

margin:25px;

        所有的4个边距都是25px
居中应用
margin: 0 auto

float属性

block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效

常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。

常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。

非完全脱离文档流，左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会造成覆盖现象，只有DIV形成覆盖现象。----->解决：要么都不使用浮动；要么都使用float浮动；要么对没有使用float浮动的DIV设置margin样式。

父级塌陷：也就是说，当容器内的全部元素设定为浮动或者内部不浮动的元素不足以支撑父级时，父级的高度不满足我们对页面布局的要求。----->解决：清除浮动

clear语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。
clear: left;对自身起作用，一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。

或者overflow：hidden

含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。

positon定位

static

static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

position: relative／absolute
relative: 相对定位。

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

absolute: 绝对定位。

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。