CSS样式(简单整理了一些基础的资料)

最新推荐文章于 2021-09-08 16:48:35 发布

chitu5884

最新推荐文章于 2021-09-08 16:48:35 发布

阅读量414

点赞数

文章标签： php 数据库人工智能

原文链接：https://my.oschina.net/u/4122812/blog/3051137

版权

<!DOCTYPE html>

<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <pre> 标签四个通用属性是：id,class,title style id:相等于网页元素身份证号，用来唯一标识网页元素 class：相等于标签的类属性，用于元素分类 title：相等于元素简介，如元素的用途 style：是用来描述元素的宽度，高度，颜色，轮廓等

css中样式由二部分组成：选择符和声明块
声明块中的每一条语句就是一个样式声明，由属性名与对应的值构成。元素是通过标签来包装，用属性来描述，因其，可以通过标签和标签中的属性来选择元素

用属性选择元素可以用id，class，title等
例：
img{
border-radius:50%;  设置图形轮廓
border:2px solid red;  设置图像边框
}


选择符是根据元素特征来定位，因此元素标签与属性以及位置都可以当做选择符来使用
选择符：
1.标签选择符(常用)
例：p{text-align:center;}  段落文本居中（用标签名称表示，用来描述网页元素类型的通常与其他选择符使用，返回一组元素）


2.id选择符
例：#header{backgroud-color:#ccc;}    设置背景为灰色（id选择符用#表示，用来选择网页中用id属性声明的元素，只返回一个元素）


3.类选择符
例：.blue{color:blue;}  设置元素文本颜色为蓝色(类选择符用英文的点"."来表示 用来选择使用了class属性声明的元素，通常返回一组相关元素)


4.属性选择符
例：[title="http://www.baidu.com"]{font-size:20px;}  将具有改属性的元素文本大小设置为20像素  （除class和style以外的属性，都可以。属性放在一对方括号中[]可同时指定多个属性还可以对属性值进行正则查询）


5.群组选择符
h1,h2,h3,h4,h5,h6{font-weight:lighter;}  去掉标题元素的加粗样式 （可以设置多个元素共用样式，用逗号隔开每个选择符）


6.后代选择符
例：section h1{color:red;} 将section元素下面所有h1元素文本设置为红色  （根据元素之间di属关系来选择，多个选择符之间，用空格分隔）


7.子代选择符
例：div>h1{color:green;} 将div 元素下面子级h1元素文本设置为绿色  （子代选择符，只选择当前元素直接子元素，用>号表示 子代选择符，非常的复杂，里面应用了大量的伪类元素，是我们学习的重点！！！）


8.伪类选择符
例：visited{color:gray;} 将访问过的链接文本颜色设置为灰色  （伪类主要应用在特定标签上，表示当前的元素的状态，例如标签的4种状态；未访问，已访问，鼠标悬停，点击中等）


9.伪元素
例：first-letter:设置段落首行的首字母样式
	first-line:设置段落首行文本的样式
	（设置段落首字母下沉效果，或者首行的显示效果  比较合适英文，中文应用不多）


10.通用与同辈选择符（不常用）
例：*{font-size:12px;}  设置网页中文本均为12像素
	p + a {color:pink;}  设置p和相邻a标签文本为粉色
	通用选择符星号"*"与同辈选择符加号"+"
	通用选择符：一次性设置所有标签的统一样式，不仅效率低，而且影响了样式继承
	同辈选择符：我们通常用其他更加高效的选择符代替它


样式写在哪里呢？
1.写在元素标签的style属性中。（仅对当前元素有效）
2.写在当前页面头部的style标签中。（仅对当前页面所有元素有效）
3.写在独立的css文件中。（对所有引用该文件的页面均有效）
css文件引入方式：<link rel="stylesheet" href="style.css">


(1).在实际生活中，标签选择符很少单独使用，通常与其他类型选择符组合在一起以达到精准定位元素的目的。
用标签来选择网页元素是最直观的方法！！！（基本格式：标签名 空格 { 属性名 冒号：属性值; }  ）


(2).用id选择符选择的元素，必须在当前页面中，是唯一的(id 选择符，通常用来设置网页中的唯一元素如网页头部，底部或者侧边栏等大多与布局元素配对使用)   （页面仅有唯一一个id选择符！！！！！！）
例：
#green{
	color:green;
}
<h1 id="green">我是凹凸曼</h1>


(3).如果网页上有多个具有相同样式的元素就使用类选择符，不仅高效，而且灵活，类选择符是我们工作中使用最多的一种选择符（多多练习！！）
例：.circle {
	border-radius:50%;  设置边框样式为圆形
	opacity:0.5;  设置透明度为0.5
}
<img class="circle" src="images/vfj.jpg" width="120" alt="">

(4).css的属性选择符中，属性名是放在一对方括号"[]"中的例如：[title]
 如果要使用多个属性时，可以连续写多个，另外还可以指定属性具体的值，来更精确的选择元素，甚至可以用正则，来进行范围匹配
 例：
 /*css文件*/
 [alt] {border-radius:50%; border: 50px solid red;}
 [alt="小魔女"] {border: 5px solid blue;}
 [alt] [title] {border: 5px solid green;}
 [alt^="china"] {border: 5px solid pink;}
 [alt$="heyzo"] {border: 5px solid purple;}
 [alt~="php"] {border: 5px solid yellow;}
 [alt|="tokyo"] {border: 5px solid tomato;}


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

<img src="images/xdb.jpg" width="110" alt="小魔女">
<img src="images/xdb.jpg" width="110" alt=" " title="">
<img src="images/xdb.jpg" width="110" alt="china hefei">
<img src="images/xdb.jpg" width="110" alt="japan heyzo">
<img src="images/xdb.jpg" width="110" alt="php mysql">
<img src="images/xdb.jpg" width="110" alt="tokyo-hot">

方法：
[属性名^=属性值]:指定起始字符
[属性名$=属性值]:指定结束字符
[属性名|=属性值]:以该值开头并以空格分隔
[属性名~=属性值]:以该值开头并以'-'分隔
属性选择符，提供了一个更加强大的选择元素的方法


(5).群组选择符，从字面意义上看，就是一次性的选择多个元素统一进行样式设置，每个选择符之间用逗号分隔，然后把共用样式写到声明块中即可
例：
h1,p {
	font-size:40px;
	color:#f69;
}

<h1>php</h1>
<p>爱敲代码的小凸凸</p>


(6).后代选择器 ：第一个选择符是起始点，用空格与后面的选择符分隔开 可以找到所有符合条件的元素包括儿子级，孙子级
例：
父选择符 后代选择符
div p img {
	border: 2px solid #F00;
}



例：
h1 span {
	font-size:16px;
	color:blue;
}
ol li img {
	width: 60px;
}
ol li {
	font-size:20px;
	color:red;
}

<h1>php<span>爱敲代码的小凸凸</span></h1>
<div>
	<h3>电影</h3>
		<ol>
			<li><img src="images/xdb.jpg" width="110" alt="">xcsd</li>
			<li><img src="images/xdb.jpg" width="110" alt="">cdf</li>
			<li><img src="images/xdb.jpg" width="110" alt="">cdw</li>
		</ol>
</div>



(7).子代选择符：仅选择直接子元素。子代选择符还支持伪类
例：
div>a {     
	color: red;
}
li:first-child {color: red;}  设置li第一行为红色
li:last-child {color:red;}  设置最后面一行为红色
li:nth-child(5) {color:red;}  设置第五行为红色
li:nth-child(even) {color:red;}  设置偶数行文本成红色
li:nth-child(odd) {color:red;}  设置基数行文本成红色

<ol>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>

</ol>

(8).通用选择符：通用选择符是用一个" * "号，一次性将页面上所有的元素设置成指定的样式  ，经常用来重置页面所有的默认样式。（谨慎使用！！！）
例：
/*元素默认样式全部被自定义样式所替代*/
* {         
	font-size: 16px;
	color: tomato;
	margin:0;
	padding: 0;
}

/*同级且相邻的关系 (仅设置一个h2元素而另一个标题没有发生变化)*/
h1+h2 {
	color: red;
}

/*同级不相邻的关系  (设置了另外一个元素为红色了)*/
h1~h2 {
	color: red;
}

/*同辈选择符又叫兄弟选择符*/




样式层叠的问题（对于同一个元素，将不同的样式，层层叠加上去，这就是层叠样式表css名称的由来）
标签样式的来源：
1.浏览器默认样式
2.用户自定义样式（重点！！！）

样式层叠的问题，是通过样式声明的位置，以及涉及的对象来设置样式不同的优先级来解决的

类样式的优先级明显高于标签样式



标签样式：将包装元素的标签样式重新定义，如果标签样式修改了，那么标签的元素样式自然也被修改
例：
/*标签样式直接修改默认样式*/
h2 {
	font-size: 3em;   设置自定义样式，使得浏览器默认的值被修改
	color: red;
}



类样式：如果要将页面上某些元素设置成统一的外观就使用类样式（类样式，仅仅做为标签class属性的值存在，因此，类样式可以应用到更多的标签上甚至其他页面都可以引用，所以更加通用）
例：
/*维护时想修改某一些代码时会产生代码冗余，利用类样式这样做就不会了*/
.heagline {
	font-size: 1.5em;
	font-weight: bold;
	color: green;
}
.red {
	color: red;
}

/*同一个class可以写多个类名以" " 空格隔开，不用写太多代码，使得代码简洁*/
<p class="heagline red">类样式的优先级明显高于标签样式</p>



id样式：具有id属性的元素，在当前页面中，应该是唯一的，所以通过id属性添加到元素的样式，（优先级要大于类元素！！！）用的并不多，但有的时候非他不可
例：
/*这里样式会变成红色，因为id的级别比其他的都要高，它会覆盖掉标签样式和类样式*/
h2 {
	color: green;
}
.blue {
	color: blue;
}
#red {
	color: red;
}
<h2 class="blue" id="red">优先级要大于类元素！！！</h2>




行内样式：是通过标签属性style，进行设置，其样式仅适用当前元素。类样式和id样式，也是通过标签属性来调用，但是他们的样式代码是写在标签外面的，可以被多个标签调用，所以行内样式的作用范围最小，级别也是最高
例：
img {
	border: 15px solid green;  设置边框为绿色
}
.blue {
	border: 15px solid blue;
}
#red {
	border: 15px solid red;
}
/*在img标签中，添加style属性 在它的属性值中写入样式声明*/
<img class="blue" id="red" 
	style="border: 15px solid yellow;" 
	src="timg.peg" width="300" alt="">


行内样式的优先级大于id样式，大于类样式，大于标签样式！！










</pre>

</body> </html>

转载于:https://my.oschina.net/u/4122812/blog/3051137