abc
ac
div[class^='a']{background-color: red;}选中字符串a开头的div
E[att$='val']:选择具有att属性且属性值为以val结尾的字符串的E元素
eg:
1
2
3
E[att*='val']:选择具有att属性且属性值为包含val的字符串的E元素。
eg:
1
2
3
E[att|='val']:如果元素E拥有att属性，并且值为val，或者值是以val-开头的，那么E将会被选择。
eg:
0
1
2
3
4.常用选择器:并集(分组选择器)选择器,交集选择器
并集选择器:E,F{} 同时选择E和F元素 E和F可以是基本选择器,用','隔开,除了通配符选择器
eg:ul,p{background-color: red;}
交集选择器:EF{} 选择满足E和F条件的元素 E,F不可以用id选择器 E和F之间没有任何符号和空格
eg:.txt.ext{color: red;} /*选择class="txt ext"的标签*/
5.伪类选择器:CSS伪类是用来添加一些选择器的特殊效果。
伪类:元素不同状态表现不同样式 选择器使用":" 如:链接元素访问前和访问后是不同的样式
伪对象(伪元素):文档结构中没有的元素 选择器使用"::"
1.用于超链接的四个伪类选择器: E一般是a标签 E:link,E:visited,E:hover,E:active
超链接状态顺序 必须按顺序写：a:link {} a:visited {} a:hover {} a:active {}
注意:link和visited只能用于a标签
E:link:设置超链接a在未被访问前的样式 初始状态
E:visited:设置超链接a在其链接地址已被访问过时的样式 访问完了的状态
E:hover:设置元素在其鼠标悬停时的样式 鼠标悬停状态 应用很广
E:active:设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式 点击状态
eg:
a:link{color: yellow;} /*初始文字颜色*/
a:visited{color: red;} /*访问完了的文字颜色*/
a:hover{color:black;} /*鼠标悬停链接上文字的颜色*/
a:active{color: blue;} /*点击和释放之间文字的颜色*/
一般link和visited设置相同样式,hover和acitve设置一样的样式
2.焦点伪类选择器 E:focus:设置对象在成为输入焦点时的样式。前提是E必须能获得焦点
eg:input:focus{color: red;}
3.否定伪类选择器 E:not(s):匹配不含有s选择符的元素E。
eg: 给该列表中除最后一项外的所有列表项加一条底边线
li:not(:last-child) { border-bottom: 1px solid #ddd; }
4.根选择器 E:root 匹配E元素在文档的根元素。在HTML中，根元素永远是HTML
eg:html:root{color: red;} /*给html设置默认颜色red*/
5.孩子选择器
E:first-child,E:last-child,E:only-child,E:nth-child(n),E:nth-last-child(n)
E:first-of-type,E:last-of-type,E:only-of-type,E:nth-of-type(n),E:nth-last-of-type(n)
E:first-child:匹配E的父元素的第一个子元素E。注意E必须是E的父元素的所有子元素中的第一个孩子,要想使用这个选择器
E:last-child:匹配E的父元素的最后一个子元素E。注意E必须是E的父元素的所有子元素中的最后一个孩子,要想使用这个选择器
应用:1.一般用于修改列表的第一个或者最后一个列表项的样式 2.有多个重复的相同的标签时,设置首位不同样式时使用
注意:E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素
eg: p:first-child{color:#f00;} 我是一个p
我是一个标题
我是一个p
我是一个div元素
我是一个p元素
我是一个p元素
我是一个div元素
我是一个p元素
我是一个p元素
E:nth-of-type(n):该选择符总是能命中父元素的第n个为E的子元素,不论第n个子元素是否为E E:nth-last-of-type(n):该选择符总是能命中父元素的倒数第n个为E的子元素,不论倒数第n个子元素是否为E 6.其他一些重要的选择器 1.E:checked:匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) eg: 2.E:enabled:匹配用户界面上处于可用状态的元素E 匹配enabled的输入框 E:disabled:匹配用户界面上处于禁用状态的元素E 匹配disabled的输入框 应用:针对表单的输入框之类的,因为输入框具有disabled属性和enabled属性 3.E:target,@page:firsr,@page:left,@page:right 略 6.伪对象选择器 很重要常用 伪元素不会改变网页结构,因为伪元素不构成网页结构 1.E:first-letter/E::first-letter:选择每个E元素的第一个字母或文字 经常用于杂志第一个字下沉 注意:大括号和E:first-letter之间有空格 p:first-letter {} 应用:此伪对象常用于块级元素(行级元素要转成块级元素才能使用),经常用来配合font-size和float属性制作首字下沉效果 eg:杂志常用的首字下沉效果
今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。
2.E:first-line/E::first-line:选择每个E元素的第一行 注意:1.此对象用于块级元素,行级元素必须使用display:block后才能使用该伪对象 2.大括号和E:first-letter之间有空格 E:first-line {} 3.E:before/E::before:在每个E元素内容之前插入内容 不影响网页结构 4.E:after/E::after:在每个E元素内容之后插入内容 after必须和content属性一起使用 重点 注意：before和after必须和content属性一起使用,content属性里面写要添加的内容 可以为伪元素设置css样式 before和after使用content添加地内容是行级元素 eg:- 我要自学网1
- 我要自学网2
- 我要自学网3
- 我要自学网4
- 我要自学网5
This is a heading
The :after pseudo-element inserts content after an element.
This is a heading
注意:仅当!DOCTYPE 已经声明 IE8支持这个内容属性.
5.E::placeholder:设置对象文字占位符的样式 eg:input::placeholder{color:green;} 6.E::selection:设置对象被选择时的样式(文字被选择就是右键鼠标移动) 注意:::selection只能定义被选择时的background-color,color及text-shadow(IE11尚不支持定义该属性) eg:p::selection{color:red;}dsfaadf
2.三种使用方式 文件引入 ,head头处引入,行内引入 3.文本样式 文本不等同于文字,还包括行级元素和行内块级元素 ,字体样式,行样式 text font line (关键字) 颜色: color:颜色值; 文本居中,左对齐,右对齐 text-align:center left,right; 垂直居中:line-heigh:与文本元素高度值一致; 文本属性(text-)和字体属性(font-) 1.文本对齐: text-align vertical-align text-align属性规定元素中的文本的水平对齐方式 属性值：none,center,left,right,justify(两端对齐,文字会出现在两端) vertical-align属性规定元素中的文本垂直对齐方式 对行内元素,行内块级元素,表格元素有效(常用) 属性值:baseline 默认值对齐父元素的基线 sub对齐下标 super:对齐上标 top:文本和文字顶部对齐 bottom:底部对齐 middle:居中对齐 2.文本颜色: color(设置文本颜色) 合法颜色值:颜色名 16进制颜色值 RGB颜色值 RGBA颜色值, opacity(设置颜色的不透明度 0是完全透明 1是不透明 取值范围0.0-1.0之间) 3.文本修饰: text-decoration === text-decoration-line, text-decoration-color(指定文本装饰的颜色), text-decoration-style(指定文本装饰的样式), text-decoration(是老版本的文本修饰,text-decoration-line是新版本的):主要用来删除链接的下划线 等价于 text-decoration-line 指定文本装饰的种类 text-decoration:none 删除链接的下划线 属性值:none(默认),underline(下划线),line-through(横穿文字的线)，inherit(继承父元素的text-decoration属性的值) 或者直接写 text-decoration:#f00 solid underline; 用这个建议,因为简单 text-decoration-color:定义文本修饰线的颜色 text-decoration-style:定义文本修饰线的样式 属性:solid：实线 double：双线 dotted：点状线条 dashed：虚线 wavy：波浪线 3.文本阴影text-shadow:设置元素中文字的阴影效果 可以设定多组效果，每组参数值以逗号分隔。多组阴影特殊效果 Demo: 火焰文字 霓虹文字 属性:none：无阴影 text-shadow:值1 值2 值3 值4; 值1:水平阴影位置 必须写的属性值 正值时,阴影在右,负值时,阴影在左 值2:垂直阴影位置 必须写的属性值 正值时,阴影在下,负值时,阴影在上 值3:阴影模糊距离 可选参数 值4:阴影颜色 可选 默认和文字颜色一样 eg:给文字添加模糊效果 p{ text-shadow: 0px 0px 2px red; } eg: text-shadow:1px 1px 0.1px red; 4.行高:如果行高的高度等于盒子的高度，可以使本行文本垂直居中，仅适用单行文本 应用:使行级元素垂直居中 line-height：就是行高的意思，指的是一行的高度 默认是normal line-height:100px 一般把heigth和line-heigth设置成一样,表示垂直居中 取值:normal,尺寸单位,数字(按照font-size的倍数设置行高),百分比(按照当前字体尺寸的百分比设置行高) 行高 line-height:用于设置文本垂直居中 1.针对单行文本垂直居中 针对单行文本垂直居中公式：行高的高度等于盒子content区域的高度(即height),可以使当行文本垂直居中， line-height = height 注意只适用单行文本。 2.针对多行文本垂直居中 行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。 第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字， 假如是5行，再看一下行高，如果行高是line- height:30px; 那么就知道行高*5=150px 第二步，让(盒子的高度-150px)/2=75; 那么设置盒子的padding-top:75px; 同时保证盒子的高度为300px,那么高度改为225px; 5.文本转换: text-transform 文本转换属性是用来指定在一个文本中的大写和小写字母。 可用于所有字句变成大写或小写字母，或每个单词的首字母大写。 属性值: uppercase(将每个单词转换成大写),lowercase(将每个单词转换成小写),capitalize(将每个单词的第一个字母转换成大写) none：无转换, 6.字间距: letter-spacing 了解即可 直到letter是字的意思即可 可以设置负值,%,px,em 属性值:normal 7.首行缩进: text-indent属性规定文本首行缩进的距离, 单位使用em(当前文字的尺寸) text-indent:只能用于文本首行缩进距离,默认值是0 eg:p{ text-indent: 2em;//首行缩进两个汉字尺寸 text-indent: 1em;//首行缩进一个汉字尺寸 } 字体属性: 1.字体大小(字号): font-size 单位可以用:px,em,rem,% font-size表示设置字体的大小,如果设置成inherit表示继承父元素的字体大小值 属性值是字体大小 eg: font-size:100px 2.字体粗细: font-weight font-weight表示设置字体的粗细 属性值:none(默认值，标准粗细)|bold(粗体)|border(更粗)|lighter(更细)|100-900(设置具体粗细，400等同于normal,700等同于bold)|inherit(继承父元素的字体粗细值) eg:font-weight:100; 注意没有单位 3.字体系列: font-family 计算机的 C://windows/Fonts 里面右本计算机的所有下载的字体 font-family:"Microsoft Yahei","微软雅黑","Arial",sans-serif,"宋体" 如果浏览器不支持第一个字体会尝试下一个字体，直到找到能支持的字体为止 4.字体样式(风格): font-style font-style: 字体; 属性值: italic:斜体 oblique:表示中间状态的倾斜 没有italic倾斜 normal:正常字体样式 经常用来重置字体 重置字体样式: 1.给i标签和b标签,清除字体样式 这样多了两个无样式标签 i,b{font-weight: normal;font-style: normal;} 5.书写模式: dirction: 检索或设置文本流的方向 属性值: ltr(left to rigth)：文本流从左到右。 rtl(right to left)：文本流从右到左。 eg: dirction:rtl;unicode-bidi:bidi-override; 注意从右到左必须加 unicode-bidi:bidi-override;否则默认无效 unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示。与 <' direction '> 属性一起使用 属性值:默认值是 normal normal：对象不打开附加的嵌入层，对于内联元素，隐式重排序跨对象边界进行工作。 embed：对象打开附加的嵌入层，<' direction '> 属性的值指定嵌入层，在对象内部进行隐式重排序。 bidi-override：严格按照 <' direction '> 属性的值重排序。忽略隐式双向运算规则 writing-mode:设置或检索对象的内容块固有的书写方向 适用于：除 <' display '> 属性定义为table-row-group | table-column-group | table-row | table-column之外的所有元素 属性值: 注意:此属性效果不能被累加使用。例如，父对象的此属性值设为 tb-rl ，子对象再设置该属性将不起作用，仍应用父对象的设置。 horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom（类似IE私有值lr-tb） vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left（类似IE私有值tb-rl） vertical-lr：垂直方向自左而右的书写方式。即 top-bottom-left-right lr-tb：左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的（IE） tb-rl：上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的（IE） eg:导航栏实例 float表示浮动djsfaj
4.border-radius 同时设置四个园角的边框半径
形式1:border-radius:左上半径 右上半径 右下半径 左下半径 (符合上右下左)
形式2:border-radius:半径 设置四个圆角半径一样
border-radius: 10px; /*设置边框的四个边角 圆的半径*/
4.边框阴影:可以是图片或者背景更有立体感 box-shadow 文本阴影:text-shadow
box-shadow:值1 值2 值3 值4 值5;
值1:水平阴影位置,必须有的参数 正值时,阴影在右边,负值时,阴影在左边
值2:垂直阴影位置,必须有的参数 正值时,阴影在下边,负值时,阴影在上边
值3:阴影模糊距离 可选值
值4:阴影尺寸, 可选值
值5:阴影颜色,合法颜色值,可选 默认黑色
eg:
outline:轮廓属性(也叫外边框),是绘制于元素周围的一条线,位于边框(border)边缘的外围,可起到突出元素的作用
应用:可以用来取消input和textarea等输入框的outline样式,因为太丑了 原来点击input边框外面会变黑
outline:在一个声明中设置所有的外边框属性
outline:none; 取消outline样式
eg:input{outline: none;}
注意:属性和border用法一样,但是不同的是outline没有outline-left这类单独表示方向的属性
outline-color
outline-style
outline-width
margin:外边距(表示本边框到其他盒子的最近距离),5个属性
属性:
margin:在一个声明中设置所有外边距属性
margin-bottom:设置元素的下外边距
margin-left:设置元素的左外边距
margin-right:设置元素的右外边距
margin-top:设置元素的上外边距
属性值:margin可以使用负值，重叠的内容。
auto 设置浏览器边距。这样做的结果会依赖于浏览器
length 定义一个固定的margin（使用像素，pt，em等）
% 定义一个使用百分比的边距
margin: 20px auto; 使盒子居中,并且和上右下左的边界距离为20px
注意：前面写几个值,表达的含义不一样,https://www.php.cn/manual/view/33005.html
margin:像素值 auto; 像素值是距离上下左右边界的 设置元素居中对齐
条件:此元素必须为块级元素,而且必须有宽高;
margin:20px,auto; 和上边界距离为20px,元素居中对齐
6_1.css的尺寸
属性:
height:设置元素的宽度
line-height:设置行高
max-height:设置元素的最大高度
max-设置元素的最大宽度
min-height:设置元素的最小高度
min-设置元素的最小宽度
设置元素的宽度
6.元素定位: 详见博客 position:指定元素的定位类型 使用left,rigth,top,bottom确定位置 eg:元素距离左边距离left
如果display设置为none,那末float及position属性定义将不生效；
position的属性值:
1.静态定位(static):所有元素的默认定位方式 元素不可以改变位置 要想元素可以改变位置定位不许设置成absolute,relative,fixed
注意:1.HTML元素的默认值,即没有定位,元素出现在正常的文档流中。
2.静态定位的元素不会受到top, bottom, left, right影响 其他定位都收他们四个属性影响
2.绝对定位(absolute):可重叠,通过z-index控制, position: absolute;
注意:
1.绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于定位
2.absolute定位使元素的位置与文档流无关,因此不占据空间。
3.absolute定位的元素和其他元素重叠。
eg:绝对定位可以设置重叠的样式
One
Two
Three
Four
3.相对定位(relative):相对定位元素不可层叠。依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。
相对定位元素经常被用来作为绝对定位元素的容器块。
注意：绝对定位和相对定位的区别,绝对定位是相对于父亲或者祖先的,而相对定位是相对于原本自身应该在在的位置的定位
eg:
One
Two
Three
Four
4.固定定位(fixed):固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。
固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。
5.粘性定位(sticky):很有用 position:sticky;基于用户的滚动位置来定位
粘性定位的元素是依赖于用户的滚动,在postion:relative和position:fixed定位之间切换
eg:
尝试滚动页面。
注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。
我是粘性定位!
滚动我
来回滚动我
滚动我
来回滚动我
滚动我
来回滚动我
This is a heading
因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。
eg:z-index:1
z-index:2
z-index:3
7.界面布局
dispaly: 太强大了
作用:1.块级元素和行级元素转换
块级变行级:display:inline;
行级变块级:display:block
2.隐藏对象但是不占据物理空间 display:none;
3.设置元素变成表格之类的
p{display: inline;}
span{display: block;}
css中所有的浮动属性
float:设置浮动,clear:清除浮动
元素的水平方向浮,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
几种重要应用:
1.如果图像是右浮动,下面的文本流将环绕在它左边
eg:
在下面的段落中，我们添加了一个 float:right 的图片。导致图片将会浮动在段落的右边。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
图片库
试着调整窗口,看看当图片没有足够的空间会发生什么。
3.创建一个没有表格的网页,使用float创建一个网页页眉、页脚、左边的内容和主要内容。
eg:
The City
Chania
Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.
You will learn more about responsive web pages in a later chapter.
图片库
试着调整窗口,看看当图片没有足够的空间会发生什么。.
第二行
visibility:设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间
属性值:
visible：设置对象可见 默认值
hidden：设置对象隐藏 占用空间
collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。
overflow:检索或设置对象处理溢出内容的方式
属性值:
visible：对溢出内容不做处理，内容可能会超出容器。
hidden：隐藏溢出容器的内容且不出现滚动条。
scroll：隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
overflow === overflow-x + overflow-y
eg:
overflow 属性规定当内容溢出元素框时发生的事情。.
overflow:scroll
You can use the overflow property when you want to have better control of the layout. The default value is visible.
overflow:hidden
You can use the overflow property when you want to have better control of the layout. The default value is visible.
cursor:显示光标移动到指定的类型
属性值:
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
eg:
将鼠标移动到这些字上改变鼠标样式cursor.
autocrosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait
8.列表 列表项标志就是列表项li前面的样式 list-style:下面三个样式的综合,使用时 list-style-image的属性值必须放在最后 eg:list-style:none;清楚列表样式 list-style-image:用图像做列表项标志。就是让每个li前面多了一个图像 属性值: none：不指定图像，默认内容标记将被 <' list-style-type '> 代替。
dafsa
rem:依据html元素的font-size做参考 用法:可以通过修改html的font-size大小影响所有rem单位的元素大小 用于响应式开发 1rem = html的font-size*1 px 2.颜色表示和16进制颜色值 html和css规范中定义了147中可用的颜色值 1.rgb(红,绿,蓝) r:0-255 g:0-255 b:0-255 2.rgba(红,绿,蓝,透明度(0.0-1.0)) 3.16进制表示颜色方式 #rrggbb r:红色(00-ff 十六进制表示) g:绿色(00-ff) b:蓝色(00-ff) eg:红色 #ff0000 绿色 #00ff00 蓝色 #0000ff