css知识点扫盲

作者: QJK | 来源:发表于2016-03-27 19:46 被阅读33次

什么是css 层叠样式表(Cascading Style Sheets)
干嘛用的 让网页的具体内容和样式分离
怎么写 3种方式

行内直接在标签style属性中写。

<div style="font-size: 30px; color: blue">11111</div>

页内在本网页style标签中写

<head>
<meta charset="UTF-8">
<style>
body{
background-color: black;
}
div{
font-size: 30px;
color: orange;
}
p{
background-color: yellow;
}
</style>
<title></title>
</head>

外部样式在单独的css文件中写在网页中使用link标签引用
```
<link rel="stylesheet" href="css/index.css">
```

那么问题来了当有多种写法用于同一个标签上时，怎么办？

css作用规律

就近谁距离标签近，优先使用谁的样式
叠加近的样式表没有设置的属性，可以叠加较远的样式表设置的属性

css选择器

用来找到标签的
类选择器

  /*类选择器*/
  .high{
    color: yellow;
    }
  <div class="high">11111</div>

id选择器

  /*id选择器*/
  #idselector{
     color: yellow;
    }
  <div id="idselector">selector</div>

并列选择器

  h2, p {color:gray;}

属性选择器

  a[href][title] {color:red;}

后代选择器

  div p.test {
        color: purple;
    }

伪类选择器

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

CSS 水平对齐

使用 margin 属性来水平对齐

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

使用 position 属性进行左和右对齐

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

使用 float 属性来进行左和右对齐

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

行内和行内块级在父标签中设置text-align: center;

垂直对齐

子控件的line-height设置和父控件高度一样即可

网友评论

本文标题：css知识点扫盲

本文链接：https://www.haomeiwen.com/subject/ogcjlttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！