html学习第二天
程序员文章站
2022-03-22 22:21:52
...
-
css
- css有三种写法：
-
写在标签内部，作为属性style,值写css代码. eg:
<p style="color:red"> -
写在head标签内部 ，使得结构和表现分离， 格式如下
<head> <title>css</title> <style type="text/css"> 选择器 { 键：值； 键：值； ...... } </style> </head>其中选择器有很多种，是为了确定设置样式的标签位置。键表示设置的样式种类名，如：font-size,color,background-color, 值表示具体哪一种样式,比如颜色：red,black,blue,等等。
-
写在外部css文件中，再调用，这种方式方便多个html文件使用，也能加快浏览器访问速度，调用方式
<link rel="stylesheet" type="text/css" href="css文件路径">
-
- css有三种写法：
-
学习的标签
- div ,是块元素，独占一行 ，无论他的内容多少，都会独占一行 ，主要用于对页面的布局。p , h1, h2等等也是块元素
- span ,是一个内联元素（行内元素），只占本身大小，不独占一行主要用于选中文字，方便设置样式。内联元素还有：a , img , iframe
-
选择器
- p {}, 直接写标签名
- # id值 {}，表示选中该id的元素，id 在每个页面上都是唯一的
- .class值 {}, 表示选中该class值的标签，class值不唯一，可以存在多个
- 选择器1，选择器2，…{} , 表示选中选择器1，选择器2,…，对应的标签,都设置样式
- * {} ,所有标签全选中设置样式
- 祖先元素(这是一个空格)后代元素 {} ，选中是该祖先元素的后代元素（父元素也是一种祖先元素）
- 父元素 > 子元素 {} ， 选中是该父元素的子元素
- 选择器1选择器2选择器3… {} , 选择器之间没有空格，表示同时满足所有选择器的标签，即交际标签，相当于多个约束条件
-
伪类
- a:link {} , a标签未被访问时设置样式（只能设置颜色，应该跟隐私有关）
- a:visited {} , a标签已经被访问时设置样式
- a:hover {} , 鼠标移动到该标签时的样式
- a:active {} , 设置鼠标点击时的样式
- input:focus {} , 再聚焦在输入框时，设置输入框的样式
- span::selection {} , 设置选中文字时所显示的样式（就是复制时的选中）
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
-
伪元素
- span:first-letter {} , 选中在任意父元素下的第一个子元素是span的span元素，为第一个字符设置样式
- span: first-line {} , 中在任意父元素下的第一个子元素是span的span元素，为第一行设置样式
- span:before {content:“文本”} , 在每一个span标签的前面插入文本
- span:after {content:“文本”}，在每一个span标签的后面插入文本
-
选择器详细 ： 菜鸟教程
上一篇： html-css学习第八天