css是什么

Cascading Style Sheet：层叠级样式表

CSS：表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动......

css优势：

1、内容和表现分离

2、网页结构表现统一，可以实现复用

3、样式十分丰富

4、建议使用独立于html的css文件

5、利用SEO，容易被搜索引擎收录

CSS快速入门

<style>
选择器{声明1;声明2;
}
</style>

每一个语句以分号结尾

css与html分离：

在html同级目录建立css文件，在html的head中加入链接

<link rel="stylesheet" href="css/style.css">

css的三种导入方式：

1、行内样式：

在标签元素中，编写一个style属性

2、style标签

3、外部样式：

优先级：就近原则：标签离谁近，就用谁

CSS选择器

作用：选择页面上的某一个或某一类元素

基本选择器：

标签选择器

选择一类标签

类选择器class

选择所有class属性一致的标签，跨标签

.class{}

id选择器

#id{}

层次选择器：

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li>
</ul>

后代选择器：在某个元素的后面

  body p{background:red;}
<--body下一层的p全部变为红色-->

子选择器

  <style>body>p{background:green;}</style>

相邻兄弟选择器

只有下面一个

  <style>.active + p{background:green;}</style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>

通用选择器

当前选中元素的向下所有兄弟元素

  <style>
.active~p{background:green;
}</style>

结构伪类选择器：

条件，带冒号的

选中p4

  <style>ul li:first-child{background:green;}</style>

选中p5:

  <style>ul li:last-child{background:green;}</style>

选中p1:

选择当前p元素的父级原色，选中父级元素的第一个，并且是当前元素才生效

p:nth-child(1){}

选择父级元素第二个为P的元素

p:nth-of-type(2){
}

属性选择器（常用）

 <style>.demo a{float:left;display:block;height:50px;width:50px;border-radius:10px;background:gray;text-align:center;color:red;text-decoration:none;margin-right:5px;font:bold 20px/50px Arial;}</style>
</head>
<body>
<p class="demo"><a href=""class="links_item_first" id="first">1</a><a href=""class="links_item_active" target="_blank"title="test">2</a><a href="a.png"class="links item">3</a><a href="b.jpg"class="links item">4</a><a href="abcd.doc"class="links item last">5</a></body>
</html>

选中存在id属性的元素

a[id]{}
属性名

选中id为first的元素

     a[id=first]{background:green;}
属性名=属性值（正则）

a标签中class含有Links的属性

*=包含xxx

     a[class*="links"]{}

选中href中以http开头的元素

   a[href^=http]{}

^=以...为开头

选中href以doc结尾的元素

a[href&=doc]{}

$=以为结尾

【狂神css笔记】CSS介绍选择器相关推荐

css笔记——css 实现自定义按钮
css实现自定义按钮的样式实际上很早就有了,只是会用的人不是很多,里面涉及到了最基础的css写法,在火狐中按钮还是会显示出来,这时需要将i标签的背景设置为白色,同时z-index设置比input高一些 ...
Html和css的class和id的命名,[HTML] CSS Id 和 Class选择器
id 和 class 选择器如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id 选择器 id 选择器可以为标 ...
html类选择器和id选择器,CSS Id 和 Class选择器
CSS Id 和 Class选择器如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. 一.id 选择器 id 选择 ...
狂神css3笔记,【CSS】CSS3学习笔记（一）——选择器
✨CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
狂神说HTML5 + CSS + JavaScript 笔记（已完结）
HTML HTML:Hyper Text Markup Language(超文本标记语言) HTML 5 + CSS 3 W3C:World Wide Web Consortium(万维网联盟) W3 ...
CSS中的id选择器和class选择器简单介绍
<!-- CSS中选择器 CSS有两种选择器id和class,总之如果说你想在HTML元素中设置CSS属性, 你要在元素中设置id和class选择器.那么我们现在来一个一个的介绍这两中选择器 i ...
CSS 笔记之 CSS 选择器
阅读目录介绍 CSS 的基本语法格式介绍基础选择器介绍组合选择器介绍伪选择器介绍其他一.CSS 的基本语法格式代码: <!DOCTYPE html> <html ...
【狂神说】CSS学习笔记
参考B站狂神说教学视频,文末附有链接 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) 美化网页(文字,阴影,超链接,列表,渐变-) 盒子模型浮动定位 ...
CSS学习笔记｜MDN-CSS选择器
记录在MDN学习CSS中的一些个人笔记. 选择器种类通配选择器或叫全局选择器.选中所有元素. * {} 标签.类.ID选择器标签选择器.选择所有的 h1 元素 h1 { } 类选择器.选择类名有 ...

【狂神css笔记】CSS介绍选择器