CSS教程

CSS

本文主要是介绍CSS，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

CSS伪类选择器

p:hover 选择鼠标指针位于之上的标签。

p:first-child 选择属于父元素的第一个标签，并且为p标签，如果第一个不是p标签则无效。

p:first-of-type 选择属于其父元素的首个出现的 <p> 元素。

.box:first-of-type （box为p标签类名）选择属于父元素的首个p标签，并且带有box类名，没有box类名则无效。

p:last-child 选择属于父元素的最后一个并且为p标签的标签，如果最后一个不是p标签则无效。

p:last-of-type 选择属于父元素的最后一个出现的p标签。

.box:last-of-type （box为p标签类名）选择属于父元素的最后一个p标签，并且带有box类名，没有box类名则无效。

p:nth-child(2) 选择属于父元素的第二个标签，并且为p标签，如果第二个不是p标签则无效。

p:nth-of-type(3) 选择属于父元素的第三个出现的p标签。

.box:nth-of-type(3)（box为p标签类名）选择属于父元素的第三个p标签，并且带有box类名，没有box类名则无效。

CSS行内元素与块级元素

行内元素：display：inline

与其他行内元素并排

不能设置宽高，默认的宽度就是文字的宽度

除了p之外，所有的文本级标签，都是行内元素。常见：a、span、b、strong、br

•

块级元素：display：block

独占一行，不能与其他任何元素并列。

能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%

所有的容器级标签，都是块级元素，以及p标签。常见：div、p、ul、ol、h1~h6

•

行内块级元素：display：inline-block

行内块状元素综合了行内元素和块状元素的特性，但是各有取舍

不自动换行

能够识别宽高

默认排列方式为从左到右。常见：img、textarea、input、button、select

块级元素和行内元素的相互转换：

我们可以通过display属性将块级元素(比如div)和行内元素进行相互转换

display：inline 转换为行内元素

display：block 转换为块级元素

display：inline-block 转换为行内块元素

display：none隐藏元素

文本属性

文本设置

<style>             div{                width: 100%;                border: 1px solid red;                color: red;                text-align: center;                font-size:24px;                text-indent: 2em;                text-decoration: underline;                letter-spacing: 20px;             }         </style>

文字设置

<!DOCTYPE html>
<html>
  <head>
        <meta charset="UTF-8">
•    <title></title>
        <style>
•      div{
•        font-weight: bold;
•        font-style: italic;
•        font-size: 50px;
•        font-family: "宋体";
•      }
•    </style>
•    <!--
•      font-weight  文字加粗
•      bold  加粗
•      font-style  文字倾斜
•      italic 斜体
•      normal  正常
•      font-size  文字大小
•    -->
  </head>
  <body>
•    鲸英三期
  </body>
</html>

行高

 div{
•        border: 1px solid red;
•        line-height: 50px;
•        height: 50px;
•      }

当文本行高与外部容器高一致时，文本会垂直居中

font复合样式

div{
•        /*font-weight: noemal;
•        font-style: normal;
•        font-size: 48px;
•        font-family: "宋体";*/
•        border: 1px solid red;
​
​
•        font: bold italic 26px/50px "宋体";
•      }

 

float浮动布局

使用行内块元素会被换行空格等影响布局，这里引入float布局来解决这个问题。

float可设置left、right、none，默认值为none。

注意标签使用了浮动后，父标签不会自动撑开，需要给父级清除浮动。

清除浮动一般使用伪元素:after来清除：

.clearfix:after {

content: ""; /内容设置为空！！！/

display: block; /显示为块级元素！！！/

height: 0; /设置高度为0！！！/

visibility: hidden; /设置不可见！！！/

clear: both; /清除浮动！！！/

定位布局

float布局已经能完成大部分的布局了，但是相对位置还是很局限，只能设置左右浮动。这里引入定位布局，相对 float更加灵活，但是会复杂一点。定位布局允许你定义标签相对于其正常位置应该出现的位置，或者相对于父元素、甚至是浏览器窗口本身的位置。

定位：position，可选值：relative、absolute、fixed、static（默认值）

relative

标签偏移某个距离。但是标签仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

标签从文档流完全删除（类似浮动），并相对于父级或祖先级有定位属性的标签做定位，如果都没设置定位属性则相对浏览器窗口做定位。

fixed

元素框的表现类似于将 position 设置为 absolute，只不过是相对浏览器窗口做的定位。

 

 

这篇关于CSS的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航