1.css介绍

一 什么是CSS
CSS全称Cascading Style Sheet层叠样式表，是专用用来为HTML标签添加样式的。
样式指的是HTML标签的显示效果，比如换行、宽高、颜色等等
层叠属于CSS的三大特性之一，我们将在后续内容中介绍
表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里
二 为何要用CSS
在没有CSS之前，我们想要修改HTML标签的样式则需要为每个HTML标签单独定义样式属性，如下
这么做的缺点是
1、记忆困难：需要记忆每个标签的所有样式相关属性，如果标签没有某个样式相关的属性，那么设置了也没有效果
2、代码耦合度高：HTML语义与样式耦合到一起
3、扩展性差：当某一类样式需要修改时，我们需要找到所有设置了该样式标签进行修改于是CSS应运而生，很好地解决了以上三个问题

2.css的导入方式

1.行内式
2.嵌入式
3.外链式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--外链式 --><link rel="stylesheet" href="css/a.css"><!--嵌入式    --><style>p {color: green;font-size: 30px;}</style><!--导入式(了解)<style>@import url("css/a.css");</style>-->
</head>
<body>
<p>你好呀</p><!--行内式-->
<!--<p style="color: red;font-size: 50px">你好呀</p>-->
</body>
</html>

3.css标签选择器和*号通配符

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/*p {color: red;}*/* {color: red;}</style>
</head>
<body>
<p>第一层</p>
<h1>哈哈哈</h1>
<a href="">点我啊</a>
<ul><li><ul><li><ul><li><p>千层饼</p></li></ul></li></ul></li>
</ul>
</body>
</html>

3.css ID选择器和类选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*id选择器*//*#p2 {color: red;}*//*类选择器*//*.p3 {color: red;}*/.p1 {color: red;}.p2 {font-size: 50px;}.p3 {text-decoration: underline;}</style>
</head>
<body>
<!--
<p>111</p>
<p id="p2">222</p>
<p class="p3">333</p>
<p class="p3">444</p>
--><!--
段落1和3颜色为red
段落2和3字体大小为50px
段落1和2的字体加上下滑线-->
<p class="p1 p3">两只黄鹂鸣翠柳</p>
<p class="p2 p3">一行白鹭上西天</p>
<p class="p1 p2">两岸猿声啼不住</p></body>
</html>

4.css 兄弟选择器和后代选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*标签选择器p {color: red;}div p {color: red;}后代选择器div+p {color: green;}相邻兄弟选择器（紧密相连）找到DIV后面的兄弟，前面找不到div~p {color: green;}毗邻兄弟选择器div>p {color: red;}儿子选择器*/.box1 ul p {color: red;}后代选择器</style>
</head>
<body>
<p>1111</p>
<div class="box1"><ul><li><p>你要呀</p><p>你要呀</p><p>你要呀</p></li></ul><p>333333</p>
</div>
<hr>
<p>22222</p><div><ul><li><p>我不要</p></li></ul><p>死鬼</p>
</div>
</body>
</html>

5.交集与并集选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div.box1 {color: red;}/*div,h1 {color: red;}*/</style>
</head>
<body>
<div class="box1"><p>11111</p><a href="#">点我啊</a>
</div>
<h1 class="box1">哈哈哈哈</h1>
</body>
</html>

6.序列选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*p:first-child {color: red;}p:last-child{color: red;}p:nth-child(3) {color: red;}p:first-of-type{color: red;}p:last-of-type{color: red;}p:nth-of-type(3){color: red;}p:only-child {color: red;}*/p:only-of-type {color: red;}</style>
</head>
<body>
<h1>w我是标题</h1>
<p>我是段落1</p>
<h1>aaaaaa</h1>
<p>我是段落2</p>
<p>我是段落333333333333333333333333333333333333333333</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div><hr><a href=""></a><p>我是段落6</p><p>我是段落6</p><p>我是段落6666666666666666666666666666666666666666</p><p>我是段落6</p><p>我是段落7777777</p><ul><li><a href=""></a><p>111111111111111</p><p>111111111111111</p><table></table></li></ul><hr><hr><hr><hr>
</div>
</body>
</html>

7.属性选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后代选择器</title><style type="text/css">/*[x] {*//*    color: red;*//*}*//*[class*="part1"] {*//*    color: red;*//*}*//*[class^="aa"] {*//*    color: red;*//*}*//*[href$="com"] {*//*    color: red;*//*}*/.inp1[type="text"] {width: 200px;height: 200px;background-color: red;}</style>
</head>
<body>
<input type="text" class="inp1">
<input type="text"><h1 id="id1" type="text">哈哈啊</h1><p id="id2" x="111">我是段落111</p><p class="aaapart1 part2" x="222">我是段落222</p><p class="xxx part2 yyy">我是段落3333</p><p class="part1asdf" x="222">我是段落44444</p><a href="#">我是我</a><a href="http://www.baidu.com">点1</a><a href="https://www.baidu.com">电2</a><img src="1.png" alt=""><img src="2.jpg" alt=""><p>我是段落</p><p>我是段落</p>
</body>
</html>

8.伪类选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>根据链接标签点击前后进行选择器标记a:link {color: red;}a:hover {color: green;font-size: 50px;}a:active {color: blue;}a:visited {color: yellow;}input:focus {background-color: red;outline: none;}</style>
</head>
<body><a href="http://www.baidu.com">点我啊小胡总</a>
<input type="text">用户名
</body>
</html>

9.伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*p:first-letter {*//*    font-size: 20px;*//*}*/div:before {content: "*";color: red;}div:after {content: "?";color: red;}.p1~.p2{color: red;}</style>
</head>
<body>
<p class="p1">111</p>
<hr>
<p class="p2">222</p>
</body>
</html>

10.css三大特性

1.继承
2.层叠性
3.优先级

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*div {*//*    color: red;*//*    font-size: 20px;*//*}*//*div a {*//*    text-decoration: none;*//*}*//*div li {*//*    color: red;*//*}*//*div ul {*//*    color: green;*//*}*/.p1 {color: red !important;font-size: 20px !important;}.p1 {color: green;font-size: 10px;}</style>
</head>
<body>
<div><ul><li><p class="p1">1111</p></li></ul></div>
</body>
</html>

day52 css选择器和特性相关推荐

前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器二. 后代选择器.子元素选择器三. 兄弟选择器四. 交集选择器与并集选择器五. 序列选择器六. 属性选择器七. 伪类选择器八. 伪元素选择器九. CSS三大特性一. ...
CSS基础（复合选择器-三大特性）
CSS基础(复合选择器-三大特性) Emmet语法快速生成HTML 如果想快速生成多个标签,直接*n. div*3
CSS选择器补充，CSS三大特性以及字体、文本样式。
在昨天基础上补充的三个选择器伪元素选择器使用伪元素来表示元素中的一些特殊的位置 ::after 表示元素的最后边的部分一般需要结合content这个样式一起使用, 通过conte ...
运用CSS选择器、CSS文本相关样式及高级特性实现如图所示的宣传页面
运用CSS选择器.CSS文本相关样式及高级特性实现如图所示的宣传页面首先新建文件夹,给它命名为宣传页面提前下载好图片,并放至文件夹内然后开始建立网页结构使用<div>盒子模型,&l ...
调研CSS选择器在浏览器中的支持情况
网上有很多这样的信息,很多的图表对各个浏览器进行比较,关于特性的支持,其实有些不全面,本文就日常常见的一些css选择器进行一个总结(本文在标准模式下). 1)关于:active,:link,:hove ...
2 - 前端基础--CSS 选择器
引入css方式(重点掌握) 1.行内样式 <div> <p style="color: green">我是一个段落</p></div> ...
玩转CSS选择器（一）之使用方法介绍
前言前几天整理了CSS一些技术关键字,但是因为自己的知识过于单薄,觉得考虑的不充分有欠缺,随后便在sf.gg提出了这个问题<关于CSS核心技术关键字都有哪些?>,也是为了让厉害的人一起参 ...
html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
Css学习总结（4）——CSS选择器总结
1:通用选择器 * { margin:0; padding:0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样 ...

day52 css选择器和特性

1.css介绍

2.css的导入方式

3.css标签选择器和*号通配符

3.css ID选择器和类选择器

4.css 兄弟选择器和后代选择器

5.交集与并集选择器

6.序列选择器

7.属性选择器

8.伪类选择器

9.伪元素选择器

10.css三大特性

day52 css选择器和特性相关推荐

最新文章

热门文章