前端学习之css1

最新推荐文章于 2024-03-12 20:08:25 发布

金子轩

最新推荐文章于 2024-03-12 20:08:25 发布

阅读量81

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_42717735/article/details/97973676

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

css

介绍
用于修饰HTML结构的，层叠样式表

层叠
多个样式修饰一个结构
子元素从父元素那里继承样式
优先级
1.!important
2.若选择器权重相同，则就近
3.行内：1000
id选择器: 100
类选择器，属性选择器，伪类选择器：10
标签选择器，伪元素选择器：1
样式表
相关样式在一起定义（封装）
语法
1. 如何在html中应用css
  1. 定义style属性中
    缺点：样式与结构冗余
    优点：优先级较高

定义在head标签中的style标签中
缺点：样式的复用率较低
优点：样式与结构分离
```
<head>
     				<meta>
     				<title></title>
     				<link rel="stylesheet" href="">
     				<script></script>
     				<style>
     					//css样式
     					div {
     						color:#fff;
     						background:#333
     					}
     				</style>
     			</head>
     			<body>
     				<div></div>
     			</body>
```
1. 将样式定义在css文件中
  优点：样式的复用率高（框架:例如bs），样式与结构分离
  style.css
div {
color:#fff;
background:#333
}

b.html
1. 规则
  style属性：
  属性名:属性值;属性名:属性值;
  
  style标签/.css
  选择器 {
  属性值:属性值;
  属性名:属性值;
  }
2. 注释
  /注释内容/
3. 选择器
  1. 核心选择器
    标签选择器
    h2 { }
    div {规则 }
    id选择器
#two {}

类选择器

.second{}

逗号选择器
h1,h2,h3 {}
组合选择器
div#two {}
选择id为div的元素
div,#two {}
选择div元素和id为two的元素
普遍选择器（通配符选择器）
*
2. 层次选择器

<div class="content">
					<a href=""></a>
					<a href	子元素选择器 	
				.header > a

选中class为header的元素的直接孩子元素a标签

				<div class="header">
					<a href=""></a>
					<ul>
						<li><a href=""></a></li>
						<li><a href=""></a></li>
					</ul>=""></a>
				</div>

后代元素选择器
.header a
选中class为header的元素的后代元素a标签

下一个兄弟
ul>li.two + li
=>
.two + *

<ul>
					<li>zero</li>
					<li>one</li>
					<li class="two">two</li>
					<li>three</li>
					<li>four</li>
					<li>five</li>
				</ul>

之后所有兄弟
ul>li.two ~ li
=>
.two ~ *

属性选择器【过滤器】
在已有选择器的基础上进行筛选
selector[]
input[type]
input[type=text]
input[type^=s] 有type属性，并且值以s开头
input[type$=t] 有type属性，并且值以t结尾
input[type*=t]有type属性，并且值中含有t
[class~=two] class中包含类名two的
伪类选择器【过滤器】

表示结构的
:first-child
:last-child
:nth-child()
number/2n+1/even(偶数)、odd（奇数）
表示状态的
:link
:hover
:active
:visited
:focus
伪元素选择器【添加元素】
selector::after
将一个伪元素添加到selector选择到的元素里面的最后面

ul.nav::after {
content:“four”;
display:block;
…
}
- one
- two
- three
- ::after
css -> css语法 -> 选择器 {规则}
-> 选择器 -> 规则

规则取值：
关键字：
位置 left right center top bottom medium
取消 none
…
颜色：
十六进制 #ffffff #ededed,简写为#fff
rgb函数 rgb(0,0,0)
关键字
渐变色 linear-gradient
长度：
绝对单位 px
相对单位
em 当前元素上的字体大小
font-size:12px
1em = 12px
2em = 24px
rem 当前html元素中设定的字体大小

html {
						font-size:10px;
					}
				

ul {
						font-size:20px;
					}
					li {
						height:2rem; 	//20px
					}

% 百分比
border-radius:50%
文本样式 (可以被继承)
line-height
text-align
text-decoration
字体样式 (可以被继承)
color
font-family 族
‘微软雅黑’ ,‘Microsoft YaHei’,‘宋体’
字体栈

font-family:“微软雅黑”,“Microsoft YaHei”,serif;

font-size 大小
网页默认字体为16px
12px 10px
font-weight 粗细
bold
thin
bolder
100~900
font-style 是否打开斜体
line-height
font:
速写，简写
font: font-style font-weight font-size/line-height font-family

font:normal bold 14px/1.5em “微软雅黑”,“Microsoft YaHei”

金子轩

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习之css1

css介绍用于修饰HTML结构的，层叠样式表层叠多个样式修饰一个结构子元素从父元素那里继承样式优先级1.!important2.若选择器权重相同，则就近3.行内：1000id选择器: 100类选择器，属性选择器，伪类选择器：10标签选择器，伪元素选择器：1样式表相关样式在一起定义（封装）语法如何在html中应用css定义style属性中缺点：样式与结...
复制链接

扫一扫