CSS学习笔记-1

来源：互联网发布：时间序列数据分析工业编辑：程序博客网时间：2024/05/26 09:56

CSS标准样式

常用的样式属性属性CSS名称说明颜色color red；green；文本属性background-color背景颜色 font-size字体大小30px font-family字体楷体隶书宋体 text-align文本对齐left;center'right;justify;inherit边框属性border-style边框样式solid实心； border-width边框宽度4px border-color边框颜色定位属性position relative；absolate left距离左边距离50px top距离上边距离50px z-index显示优先级数字越大优先级越高

样式实现方式

嵌入样式表（行样式表），只能操作某一个样式，比较灵活

<p style="color:yellow;background-color:skyblue;width:500px;text-align:justify;text-justify:contribute-all-lines">

嵌入式样式表，可以操作多个，

<style>body{margin:1px;color:black;height:50px}.edu{background-color:gold;height:50px}.undergraduate{background-color:green;height:50px}.work{background-color:gray;height:50px;position:absolute;left:50px;top:50px;z-index:3}.father1{background-color:blue;height:100px}.father2{background-color:purple;height:100px;position:relative;top:100px}.position1{background-color:red;height:50px;position:relative;left:300px;top:50px}.position2{background-color:red;height:50px;position:absolute;left:300px;top:50px;z-index:2}</style>

引入式样式表，将样式放在文件中，需要时引用即可,比较方便。

<head><meta charste="utf-8"><link href="CSS.css" rel="stylesheet" type="text/css" /></head>

优先级：行内样式>嵌入样式>引用样式

样式选择器：

HTML选择器：所有HTML标签都可以定义特有的样式，网页中所有的标签都会应用所定义的样式，如body，div，p，a，li，ul，ol，span，b，img

class选择器：以.开头，名称可以自己定义，可以应用于多个名称相同的标签

ID选择器：ID是网页唯一性的标识，不可以重复，以#开头，一个ID样式只能应用到一个标签，主要用于程序交互的过程

关联选择器：引用了div样式的div中的p标签会引用div p样式，

<head><style>.div p{font-size:35px}</style></head><body><p>这是p标签的内容</p><div class="div"><p>这是p标签的内容</p></div></body>

组合选择器：使用，表示并列的多个标签都可以使用同一个样式

<head><style>.l1,.l2{font-size:12px;text-decoration:none}.l1 a{background-color:red}.l2 a{background-color:yellow}</style></head><body><div class="l1">我是l1<a href="">我是l1</a></div><div class="l1">我是l2<a href="">我是l2</a></div></body

伪元素选择器：对于同一元素的不同状态选择不同的样式

a{font-size:12px}a:hover {font-size:14px;color:grey}p:firstline{}p:firstletter{}

阅读全文

1 0

CSS学习笔记-1

CSS标准样式

样式实现方式

优先级：行内样式>嵌入样式>引用样式

样式选择器：