前端 -- css
Posted biulo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端 -- css相关的知识，希望对你有一定的参考价值。
css样式的引入
1. 行内引入
<div> <p style="color: green">我是一个段落</p> </div>
2. 内接样式
<style type="text/css"> /*写我们的css代码*/ span color: yellow; </style>
3. 外接样式 - 链接式
<link rel="stylesheet" href="./index.css">
4. 外接样式 - 导入式
<style type="text/css"> @import url(‘./index.css‘); </style>
最简单的基本样式
<style> div color: red; width: 200px; height: 200px; /*background-color: yellow;*/ </style>
基本选择器
标签选择器
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“
body
color:gray;
font-size: 12px;
/*标签选择器*/
p
color: red;
font-size: 20px;
span
color: yellow;
类选择器
所谓类：就是class . class与id非常相似 任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开
.lv color: green; .big font-size: 40px; .line text-decoration: underline;
<!-- 公共类 共有的属性 --> <div> <p class="lv big">段落1</p> <p class="lv line">段落2</p> <p class="line big">段落3</p> </div>
id选择器
同一个页面中id不能重复。
任何的标签都可以设置id ，id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
#box
background:green;
#s1
color: red;
#s2
font-size: 30px;
<body> <div id="box">娃哈哈</div> <div id="s1">爽歪歪</div> <div id="s2">QQ星</div> </body>
通用选择器
所有的标签都会被选中
* color : red;
高级选择器
后代选择器
使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
<head> <meta charset="UTF-8"> <title>Title</title> <style> div span color: tomato; </style> </head> <body> <div> 我是div标签的content <span>西红柿色1</span> <p> 在div-p标签中 <span>西红柿色2</span> </p> </div> <span>我只是一个单纯的span标签</span> </body>
子代选择器
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p
<head> <meta charset="UTF-8"> <title>Title</title> <style> div>span color: tomato; </style> </head> <body> <div> 我是div标签的content <span>西红柿色1</span> <p> 在div-p标签中 <span>西红柿色2</span> </p> </div> <span>我只是一个单纯的span标签</span> </body>
毗邻选择器
使用+表示毗邻选择器。比如span+a，只找span标签下面一个的a标签，找不到就算了
<style> span+a color: tomato; </style> <div> <a>我是a0标签</a> <span>span标签</span> <a>我是a1标签</a> <!--变色--> <a>我是a2标签</a> </div>
弟弟选择器
使用~表示弟弟选择器。比如span~a，找span下面所有的a标签
<style> span~a color: tomato; </style> <div> <a>我是a0标签</a> <span>span标签</span> <a>我是a1标签</a> <!--变色--> <a>我是a2标签</a> <!--变色--> </div>
属性选择器
属性选择器，字面意思就是根据标签中的属性，选中当前的标签。
<style> /*a[href]*/ /*color: green;*/ /**/ /*a[href=‘http://www.taobao.com‘]*/ /*color: lightpink;*/ /**/ input[type=‘text‘] background-color: lightblue; </style> <body> <div> <a href="http://www.taobao.com">我是a0标签</a> <span>span标签</span> <a href="http://www.jd.com">我是a1标签</a> <a href="http://www.mi.com">我是a2标签</a> <a>没有href属性</a> </div> <input type="text"> <input type="password"> </body>
并集选择器
多个选择器之间用逗号隔开，表示选中的页面中的多个标签。一些共性的元素可以使用并集选择器
<style> ul,ol,span background-color: gainsboro; </style> <body> <ul> <li>u-first</li> </ul> <ol> <li>o-first</li> </ol> </body>
交集选择器
使用 . 表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active
<style> div.box1.box2 background-color: red; width: 200px; height: 200px; </style> <body> <div class="box1 box2">box1box2</div> <div class="box1">box1</div> <div>aaa</div> <span class="box1">span标签</span> </body>
伪类选择器
提前对标签进行定义
<style> a:link color:tomato; a:visited color: gray; a:active color: green; input:focus background-color: aquamarine; div width: 100px; height: 100px; background-color: lightgray; div:hover background-color: pink; </style> <body> <a href="http://www.jd.com">京东</a> <a href="http://www.xiaohuar.com">校花</a> <input type="text"> <div></div> </body> 其中 a : link（未访问过的链接） visited（访问过的链接） active（鼠标在链接按下时） input: focus（获取焦点后） 通用: hover（鼠标悬浮时）（通用）
伪元素选择器
对选到的元素进行操作（通用）
<style> p:first-letter color: green; p:before content: ‘**‘; /*color: pink;*/ p:after content: ‘.....‘; color: lightblue; </style> <body> <div>春江水暖鸭先知</div> </body> 其中 first-letter 操作第一个字符 before 在语句前操作 after 在语句后操作
以上是关于前端 -- css的主要内容，如果未能解决你的问题，请参考以下文章