wordpress 中文链接,新网站seo方法,网站开发项目运营经理岗位职责,ping wordpress目录 CSS
语法
引入方式
选择器
标签选择器 类选择器
ID选择器
通配符选择器
复合选择器
常用CSS
color
font-size
border
width和height
padding
外边距 CSS
CSS(Cascading Style Sheet)#xff0c;层叠样式表, ⽤于控制⻚⾯的样式. CSS 能够对⽹⻚中元素位置…
目录 CSS
语法
引入方式
选择器
标签选择器 类选择器
ID选择器
通配符选择器
复合选择器
常用CSS
color
font-size
border
width和height
padding
外边距 CSS
CSS(Cascading Style Sheet)层叠样式表, ⽤于控制⻚⾯的样式. CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离.
语法 选择器 {⼀条/N条声明} • 选择器决定针对谁修改 (找谁) • 声明决定修改啥. (⼲啥) • 声明的属性是键值对. 使⽤ ; 区分键值对, 使⽤ : 区分键和值. stylep {/* 设置字体颜⾊ */color: red;/* 设置字体⼤⼩ */font-size: 30px;}/style
phello/p
引入方式
引入方式语法描述示例行内样式 在标签内使⽤style属性属性值是css属性键 值对 div stylecolor:green绿⾊/div 内部样式 定义style标签在标签内部定义css样式 style h1 {...} /style 外部样式 定义link标签通过href属性引⼊外部css ⽂件 link relstylesheet href[CSS⽂件路 径] 3种引⼊⽅式对⽐: 1. 内部样式会出现⼤量的代码冗余, 不⽅便后期的维护所以不常⽤. 2. ⾏内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的样式. 3. 外部样式html和css实现了完全的分离, 企业开发常⽤⽅式。 选择器
CSS 选择器的主要功能就是选中⻚⾯指定的标签元素. 选中了元素, 才可以设置元素的属性. CSS选择器主要分以下⼏种: 1. 标签选择器 2. class选择器 3. id选择器 4. 复合选择器 5. 通配符选择器 我们通过代码来学习CSS选择器的使⽤.
标签选择器
/* 选择所有的a标签, 设置颜⾊为红⾊ */
a {color: red;
}
/* 选择所有的div标签, 设置颜⾊为绿⾊ */
div {color: green;
} 类选择器
/* 选择class为font32的元素, 设置字体⼤⼩为32px */
.font32 {font-size: 32px;
} ⼀个类可以被多个标签使⽤, ⼀个标签也能使⽤多个类(多个类名要使⽤空格分割, 这种做法可以让 代码更好复⽤)
ID选择器
/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {color: red;
}
id 是唯⼀的, 不能被多个标签使⽤ (是和 类选择器 最⼤的区别)
通配符选择器
/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {color: red;
}
复合选择器
/*只设置 ul标签下的 li标签下的 a标签, 颜⾊为红⾊*/
ul li a {color: blue;
} 1. 以上三个标签选择器 ul li a 中的任意, 都可以替换成类选择器, 或者id选择器, 可以是任意选 择器的组合, 也可以是任意数量选择器的组合 2. 不⼀定是相邻的标签, 也可以是孙⼦标签 3. 如果需要选择多种标签, 可以使⽤ , 分割, 如 p, div { } 表⽰同时选中p标签和div标签. 逗号前后可以是以上任意选择器, 也可以是选择器的组合.
常用CSS
color color: 设置字体颜⾊ .text1{color: red;
} font-size font-size: 设置字体⼤⼩ .text1{font-size: 32px;
} border border: 边框 边框是⼀个复合属性, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值⾃动判断 .text{border: 1px solid purple;
} 以上border属性的对应设置的维度分别为边框粗细, 边框样式, 边框颜⾊. 也可以拆开来设置 样式说明取值 border-width 设置边框粗细 数值 border-style 设置边框样式 dotted : 点状 solid : 实线 double : 双线 dashed: 虚线 border-color 设置边框颜⾊ 同 color border: 1px solid purple; 就等同于以下代码:
.text1 {/* border: 1px purple solid; */border-width: 1px;border-style: solid;border-color: purple;
}
width和height
width: 设置宽度 height: 设置⾼度 只有块级元素可以设置宽⾼ 块级元素是HTML标签的⼀种显⽰模式, 对应的还有⾏内元素 常⻅块级元素: h1-h6, p, div 等 常⻅⾏内元素: a span 块级元素独占⼀⾏, 可以设置宽⾼ ⾏内元素不独占⼀⾏, 不能设置宽⾼ 改变显⽰模式 使⽤ display 属性可以修改元素的显⽰模式. • display: block 改成块级元素 [常⽤] • display: inline 改成⾏内元素 [很少⽤] padding
padding: 内边距, 设置内容和边框之间的距离. 内容默认是顶着边框来放置的. ⽤ padding 来控制这个距离。 padding也是⼀个复合样式, 可以对四个⽅向分开设置 • padding-top • padding-bottom • padding-left • padding-right 外边距
margin: 外边距, 设置元素和元素之间的距离. margin也是⼀个复合样式, 可以给四个⽅向都加上外边距 • margin-top • margin-bottom • margin-left • margin-right
