CSS笔记

lhjava1234

于 2022-09-22 17:44:57 发布

阅读量261

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/lhjava1234/article/details/126994877

版权

一，css概念

Cascading Style Sheet 级联样式表

表现HTML或XHTML文件样式的计算机语言包括对字体、颜色、边距、高度、宽度、背景图片、网

页定位等设定

二，css优势

内容与表现分离

网页的表现统一，容易修改

丰富的样式，使得页面布局更加灵活

减少网页的代码量，增加网页的浏览速度，节省网络带宽

运用独立于页面的CSS，有利于网页被搜索引擎收录

三，HTML中引入css方式

1，行内样式：使用style属性引入css样式

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在标签中设置的样式</p>

2，内部样式：css代码写在<head>标签中

<style>
        h1{color: green; }
</style>

3，外部样式：

<head>
  <link href="css文件路径" rel="stylesheet" type="text/css" />
</head>

四，css基本+高级选择器

1，标签选择器

2，类选择器

<p style="text-align: right;">享受<span class="show">“北大式”</span>教育服务</p>




.show{
      color: #FFFFFF;
    }

3，ID选择器

4，层次选择器

后代选择器：

两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

body p{ background: red; }

body下所有的p元素都应用

子选择器：

body>p{ background: pink; }

相邻兄弟选择器：

.active+p { background: green; }

通用兄弟选择器：

active后面所有兄弟p标签都应用

.active~p{ background: yellow; }

5，结构伪类选择器

ul li:first-child{ background: red;}//ul的第一个子元素变为红色背景
ul li:last-child{ background: green;}//ul最后一个子元素变为绿色背景
p:nth-child(1){ background: yellow;}//父级第一个子元素p变为黄色
p:nth-of-type(2){ background: blue;}//父级第二个子元素p变为黄色

6，属性选择器

a[id] { background: yellow; }//含有id属性的a元素应用样式


a[id=first] { background: red; }//含有id属性=first的a元素应用样式

a[href^=http] { background: red; }//含有href属性并且该属性的值是以http开头的a元素应用

a[href$=png] { background: red; }//含有herf属性并且以字符串png结尾的a元素

a[class*=links] { background: red; }//所有的a标签都有class属性，并且属性值中都包含links字符串的a元素

7，其他选择器

给标签设置多个别名分别设置各个别名的样式可以实现不同样式
<ul>
  <li class="a b c">第一组</li>
</ul>

.a{
    color: #b31722;
}
.b{
    color: blue;
}

四， CSS3美化网页元素

1，<span>标签

能让某几个文字或者某个词语凸显出来

<p>享受<span class="show">“北大式”</span>教育服务</p>
<p>在北大，有一群人默默支持你成就
<span id="dream">IT梦想</span></p>
<p class="bird">选择<span>北大</span>，成就你的梦想</p>

2，字体样式

p{font-family:Verdana,"楷体";}

h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}

text-align属性

文本修饰

text-decoration属性

3，文本阴影

4，超链接伪类（鼠标滑过变颜色）

a:hover {
	color:#B46210;
	text-decoration:underline;
}

5，列表样式（去除列表小黑点）

li {
	list-style:none;
}

6，背景样式

背景颜色：background-color属性

background-color: gainsboro;

背景图像：background-image属性

背景重复方式：background-repeat属性

背景定位：background-position属性

背景样式简写：background属性

background: url("lQHPJxa1n-TOp7YUDbAMEM0HXs5eXwMqo9hgQDYA_13_20.gif") 180px 3px no-repeat;

7，线性渐变